JSFiddle - React, Tailwind, and code Playground

by Fagner Brack

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 stepFor(element, method) {
  const methodArgs = [].slice.call(arguments, 2);
  return function(next)  {
    method.apply(element, methodArgs);
    next();
  };
}
function clickImage() {
  const image = $(this);
  $({})
    .queue(stepFor(image, image.addClass, 'zoomify'))
    .delay(1000)
    .queue(stepFor(image, image.removeClass, 'zoomify'));
};
$('.image').on('click', clickImage);