マウスオーナー/クリック時にのイメージズームアウト/ズームイン効果の作成

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

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

実現：ｃｓｓ＋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を使用しています