JSFiddle - React, Tailwind, and code Playground

by Viruthagiri

HTML

<div class="wrap">
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
</div>

CSS

body {
    padding: 60px;
}

.wrap {
    width: 300px;
    font-size: 0;
}
.wrap > div {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
}

.wrap > div > div {
    display: inline-block;
    z-index: 1000;
    background-color: red;
    outline: 1px solid black;
    width: 100px;
    height: 100px;
}

JavaScript

$('.wrap > div > div').hover(function() {
    $(this).clearQueue().parent().css('z-index', '10000')
    $(this).animate({
        width: 200, height: 200, margin: -50,
    });
}, function() {
    $(this).clearQueue().parent().css('z-index', '100')
    $(this).animate({
        width: 100, height: 100, margin: 0,
    }, function() {
        $(this).parent().css('z-index', '0');
    });
});