JSFiddle - React, Tailwind, and code Playground

by Fagner Brack October 19, 2016

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<img class="image" src="http://placehold.it/30x30" onclick="clickImageA(this)">
<img class="image" src="http://placehold.it/30x30" onclick="clickImageB(this)">
<img class="image" src="http://placehold.it/30x30" onclick="clickImageC(this)">

CSS

.image {
  width: 30px;
  height: 30px;
  border: 5px solid green;
  transform: scale(1);
  transition: all .5s;
}

.zoomify {
    transform: scale(2) !important;
}

JavaScript

function clickImage() {
 const image = $(this);
 $({})
    .queue(function step1(next) {
      image.addClass('zoomify');
      next();
    })
    .delay(1000) // step 2
    .queue(function step3(next) {
      image.removeClass('zoomify');
      next();
    });
};
$('.image').on('click', clickImage);