JSFiddle - React, Tailwind, and code Playground

by fparent

HTML

<div id="parent">
    <div id="child"></div>
</div>

CSS

#parent {
    width:200px; height:200px;
    background-color:cyan;
    position:relative;
    z-index:1;
}

#child {
    width:50px; height:50px;
    background-color:#BD0F4F;
    position:absolute;
    left:50%; top:50%;
    margin: -25px 0 0 -25px;
    z-index:4;
}

JavaScript

$('#parent').bind('mouseenter', function() {
    $('#child').css({
        left:'-=50%',
        top:'-=50%',
        width:'100%',
        height:'100%',
        margin:0,
        'z-index':0
    });   
});