JSFiddle - React, Tailwind, and code Playground

by George Batt

HTML

<img class="hoverific" width="35" height="35"  src="http://dummyimage.com/360/456/fff">
<img class="hoverific" width="35" height="35"  src="http://dummyimage.com/360/376/fff">
<img class="hoverific" width="35" height="35"  src="http://dummyimage.com/360/756/fff">
<img class="hoverific" width="35" height="35"  src="http://dummyimage.com/360/134/fff">
<img class="hoverific" width="35" height="35"  src="http://dummyimage.com/360/641/fff">
<img class="hoverific" width="35" height="35"  src="http://dummyimage.com/360/993/fff">

CSS

.hoverific {
    text-align: center;
    vertical-align: middle;
    width: 35px;
    height: 35px;
}

JavaScript

$wrapper = $('<div/>').css({display:'inline-block',width:35,height:35,position:'relative'});

jQuery(".hoverific").css({position:'absolute',left:0,top:0}).hover(function() {
  jQuery(this).stop().animate({
    width: 360,
    height: 360,
  });
}, function() {
  jQuery(this).stop().animate({
    width: 35, height: 35,

  });
}).wrap($wrapper);