JSFiddle - React, Tailwind, and code Playground

by tiger

HTML

<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>

CSS

.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); } 
}

JavaScript

$('.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") ;
    }
  );