title: How to add zoom and flip to an image using css/jquery
body: <p>I am trying to add both flip and zoom effects, But I am able to achieve only one effect.</p>
  
  <p>Use case is when I click on the Image the image will zoom, now i need to add the flip effect before the mouseleave the image.</p>
  
  <p>Can anyone please help me out with the output using my code.</p>
  
  <p>here it is what I have tried :</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div class="flip"&gt;
  &lt;div class = 'card'&gt;
          &lt;img src="http://cdn.ndtv.com/tech/images/doodle_for_google_2013.jpg" class="zoom_img" /&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.zoom_img {
      height: 250px;
      width: 250px;
      /* -moz-transition: -moz-transform 0.1s ease-in;
      -webkit-transition: -webkit-transform 0.1s ease-in;
      -o-transition: -o-transform 0.1s ease-in; */
      -webkit-transition: -webkit-transform 0.5s ease-in;
      -o-transition: -webkit-transform 0.5s ease-in;
  }
  .zoom_img_press {
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -o-transform: scale(1.1);
  }
  .flip {
      -webkit-perspective: 800;
      width: 400px;
      height: 200px;
      position: relative;
      margin: 50px auto;
  }
  .flip .card .flipped {
      -webkit-transform: rotatex(-180deg);
  }
  .flip .card {
      width: 100%;
      height: 100%;
      -webkit-transform-style: preserve-3d;
      -webkit-transition: 0.5s;
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(document).ready(function() {
  
          $('.flip').click(function(){
              $(this).find('.zoom_img').addClass('zoom_img_press').mouseleave(function(){
                  $(this).removeClass('zoom_img_press');
              });
          });
  $(this).find('.zoom_img').addClass('flipped').mouseleave(function(){
                  $(this).removeClass('flipped');
              });
         });
  
      });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/VzkJf/" rel="nofollow">Demo</a></p>