JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="parent">
        
    </div>
    <div class="parent">
        
    </div>
    <div class="child" style="top: 0; left: 0;">
        
    </div>
    <div class="child" style="top: 25px; left: 50px;">
    
    </div>
    <div class="child" style="top: 125px; left: 0px;">
    
    </div>
    <div class="child" style="top: 150px; left: 50px;">
    
    </div>
</div>

CSS

#container { 
    position: relative; 
    display: inline-block; }
.parent { 
    width: 100px;
    height: 100px;
    border: 1px solid #000; }
/*#container:hover .parent { background: red; }*/
.child {
    background: #000; 
    position: absolute;
    width: 25px;
    height: 25px;
    display: inline-block;}
.child:hover::after { content:''; display:block; width:100px; height:100px; background:red; position:absolute; z-index:-1;}
.child:nth-child(3):hover::after { top:1px; left:1px; background:blue; }
.child:nth-child(4):hover::after { top:-24px; left:-49px;}
.child:nth-child(5):hover::after { top:-22px; left:1px;}
.child:nth-child(6):hover::after { top:-47px; left:-49px;}