JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="twocol">
    <div class="inside">Test</div>
</div>
<div class="twocol">
    <div class="inside">Test</div>
</div>
<div class="twocol">
    <div class="inside">Test</div>
</div>
<div class="twocol">
    <div class="inside">Test</div>
</div>

CSS

.twocol {
    float: left;
    width: 150px;
    height: 150px;
    position: relative;
    padding: 10px;
}
.inside {
    position: absolute;
    border: 1px solid #000;
    width: 150px;
    height: 150px;
    background: #eee;
    z-index: 900;
}
.inside:hover {
    position: absolute;
    z-index: 999;
}

JavaScript

$('.inside').hover(

function () {
    $(this).animate({
        height: '200px',
        width: '200px'
    }, 200);
},

function () {
    $(this).animate({
        height: '150px',
        width: '150px'
    }, 200);
});