JSFiddle - React, Tailwind, and code Playground

by Fagner Brack

HTML

<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

window.clickImageA = function(imageA) {
  imageA.classList.add('zoomify');
  setTimeout(function() {
  	imageA.classList.remove('zoomify');
  }, 1000);
};

window.clickImageB = function(imageB) {
	imageB.classList.add('zoomify');
  setTimeout(function() {
  	imageB.classList.remove('zoomify');
  }, 1000);
};

window.clickImageC = function(imageC) {
  imageC.classList.add('zoomify');
  setTimeout(function() {
    imageC.classList.remove('zoomify');
  }, 1000);
};