JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper"><div class="inner"></div>text</div>

CSS

.wrapper {border:2px solid #f00;width:200px;height:200px;position:relative;}
    
    .inner:before
    {content:'';
    background:#ccc;
    width:105%;
    height:105%;
    position:absolute;
    top:-2.5%;
    left:-2.5%;
    z-index:1;
    opacity:1;
    transition:z-index 0, opacity 1.2s;}
    
    .wrapper:hover .inner:before
    {transition:z-index 0 1.2s, opacity 1.2s;
    opacity:0;
    z-index:-1;}