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); };
<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)">
.image { width: 30px; height: 30px; border: 5px solid green; transform: scale(1); transition: all .5s; } .zoomify { transform: scale(2) !important; }