JSFiddle - React, Tailwind, and code Playground

HTML

<div  id="hover1">
<div class="" id="">
<div class="">
Content1
</div>

</div></div>

<div  id="hover2">
<div class="" id="mask2">
<div class="">
Content2
</div>

</div></div>

<div  id="hover3">
<div class="" id="mask3">
<div class="">
Content3
</div>

</div></div>

<div  id="hover4">
<div class="" id="mask4">
<div class="">
Content4
</div>

</div></div>

<div  id="hover5">
<div class="" id="mask5">
<div class="">
Content5
</div>

</div></div>

CSS

#hover1,#hover2,#hover3,#hover4
{
	width:100px;
	height:100px;
	float:left;
}

#hover1:hover ~ #hover2 #mask2,
#hover1:hover ~ #hover3 #mask3,
#hover1:hover ~ #hover4 #mask4
{
    /* CSS */
	display:block!important;	
	opacity:0.5;
	transition: 0.5s all;
	padding-right:19px;		
}
#hover2:hover ~ #hover3 #mask3,
#hover2:hover ~ #hover4 #mask4,
#hover2:hover ~ #hover5 #mask5
{
    /* CSS */
	display:block!important;	
	opacity:1;
	transition: 0.5s all;
	padding-right:39px;		
  color: red;
}
#hover3:hover ~ #hover1 #mask1,
#hover3:hover ~ #hover2 #mask2,
#hover3:hover ~ #hover4 #mask4
{
    /* CSS */
	display:block!important;	
	opacity:0.5;
	transition: 0.5s all;
	padding-right:19px;		
}
#hover4:hover + #hover1 #mask1,
#hover4:hover ~ #hover2 #mask2,
#hover4:hover ~ #hover3 #mask3
{
    /* CSS */
	display:block!important;	
	opacity:0.5;
	transition: 0.5s all;
	padding-right:19px;		
}