マウスオーバー：イメージのズームイン＋マウスクリック：イメージのズームアウト

• マウスオーバー、クリック時のイメージのズームアウト、インの効果を作成したいです
  
  

実現：ｃｓｓ＋jQueryで作成します

• イメージのズームイン/アウトのcss（animationの使用）定義
  

  .bounceout{
  
      -webkit-animation: bounceout 0.3s ease 2 alternate;
  
              animation: bounceout 0.3s ease 2 alternate ;
  
  }
  
  .bouncein {
  
      -webkit-animation: bouncein 0.3s ease 2 alternate ;
  
              animation: bouncein 0.3s ease 2 alternate ;
  
  }
  
  @-webkit-keyframes bouncein {
  
      from{  transform: scale(1); } 
  
      to {  transform: scale(.95); } 
  
  }
  
  @keyframes bouncein {
  
      from{  transform: scale(1); } 
  
      to {  transform: scale(.95); } 
  
  }
  
  @-webkit-keyframes bounceout {
  
      from {  transform: scale(1); } 
  
      to {  transform: scale(1.05); } 
  
  }
  
  @keyframes bounceout {
  
      from {  transform: scale(1); } 
  
      to {  transform: scale(1.05); } 
  
  }
  

• jQueryを利用して、マウスオーバーとクリック時に、上記動画クラスをイメージブロックに追加します

    $('.views-post-img-td img').click(function() {
  
      $(this).addClass("bouncein");
  
    });
  
    $('.views-post-img-td img').hover(
  
      function() {
  
        $(this).addClass("bounceout");
  
      }, 
  
      function(){
  
        $(this).removeClass("bounceout") ;
  
      }
  
    );

実例（サンプル）

• ここで、clickイベントを使用せず、mousedownとmouseupを使用しています