$('.views-post-img-td img').mousedown(function() { $(this).addClass("bouncein"); }); $('.views-post-img-td img').mouseup(function() { $(this).removeClass("bouncein"); }); $('.views-post-img-td img').hover( function() { $(this).addClass("bounceout"); }, function(){ $(this).removeClass("bounceout") ; } );
<div class="view-content" style="visibility: visible;"> <table class="views-view-grid cols-4"> <tbody> <tr class="row-1 row-first"> <td class="views-post-img-td"> <a href="#"> <img class="img-responsive" src="http://ligare-hair.jp/sites/ligare.valuesv.jp/files/styles/scale_cron_285x378/public/hair_styles/img_4176.jpg?itok=jToGclZZ" width="285" height="378" alt=""> </a> </td> <td class="views-post-img-td"> <a href="#"> <img class="img-responsive" src="http://ligare-hair.jp/sites/ligare.valuesv.jp/files/styles/scale_cron_285x378/public/hair_styles/image_5.jpeg?itok=2zLhmq-N" width="285" height="378" alt=""> </a> </td> </tr> </tbody> </table> </div>
.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); } }