JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<article>
    <div class="color-box">
            
    </div>
    <div class="wrap">
        
    </div>
</article>
<article>
    <div class="color-box">
            
    </div>
    <div class="wrap">
        
    </div>
</article>
<article>
    <div class="color-box">
            
    </div>
    <div class="wrap">
        
    </div>
</article>
<article>
    <div class="color-box">
            
    </div>
    <div class="wrap">
        
    </div>
</article>

CSS

* {margin:0;padding:0;}


article {
    position:relative;
    margin: 20px;
    width:500px;
}
.wrap {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:red;
    z-index:-1;
    transition: all 0.5s linear;
}
.color-box {
    height:50px;
    background:blue;
}
article:hover .wrap {
    left:-10px;
    right:-10px;
    top:-10px;
    bottom:-10px;
}