Readplace

JSFiddle - React, Tailwind, and code Playground

JSFiddle ~1 min read
View original
  • best

This article is too short to summarise.

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

function clickImage(image) {
	image.classList.add('zoomify');
  setTimeout(function() {
  	image.classList.remove('zoomify');
  }, 1000);
};

window.clickImageA = clickImage;
window.clickImageB = clickImage;
window.clickImageC = clickImage;

Please Whitelist JSFiddle in your content blocker.

Help keep JSFiddle free for always by one of two ways:

  • Whitelist JSFiddle in your content blocker (two clicks)
  • Go PRO and get access to additional PRO features →

Join the 4+ million users, and keep the JSFiddle dream alive.

  • Ad-free

    All ads in the editor and listing pages are turned completely off.

  • Use pre-released features

    You get to try and use features (like the Palette Color Generator) months before everyone else.

  • Fiddle collections

    Sort and categorize your Fiddles into multiple collections.

  • Private collections and fiddles

    You can make as many Private Fiddles, and Private Collections as you wish!

  • Console

    Debug your Fiddle with a minimal built-in JavaScript console.