JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<img class='img' id='img1' height='40' width='40' />
<img class='img' id='img2' height='40' width='40' />
<img class='img' id='img3' height='40' width='40' />
<img class='img' id='img4' height='40' width='40' />
<img class='img' id='img5' height='40' width='40' />
<img class='img' id='img6' height='40' width='40' />
<img class='img' id='img7' height='40' width='40' />
<img class='img' id='img8' height='40' width='40' />

CSS

.img{
    padding: 10px;
    position: relative;
    cursor: pointer;
}

JavaScript

$('.img').hover(
        function(){
            $(this).animate({
                width: "+=14",
                height: "+=14",
                padding: "-=7"
            });
        }, function(){
            $(this).animate({
                width: "-=14",
                height: "-=14",
                padding: "+=7"
            });
        }
    );