JSFiddle - React, Tailwind, and code Playground

by spk063

HTML

<div  id="hover1">
<div class="portfolio_box_skin_2" id="mask1">
<div class="portfolio_image_skin2">
Content1
</div>
<div class="cleardiv"></div>	
</div></div>

<div  id="hover2">
<div class="portfolio_box_skin_2" id="mask2">
<div class="portfolio_image_skin2">
Content2
</div>
<div class="cleardiv"></div>	
</div></div>

<div  id="hover3">
<div class="portfolio_box_skin_2" id="mask3">
<div class="portfolio_image_skin2">
Content3
</div>
<div class="cleardiv"></div>	
</div></div>

<div  id="hover4">
<div class="portfolio_box_skin_2" id="mask4">
<div class="portfolio_image_skin2">
Content4
</div>
<div class="cleardiv"></div>	
</div></div>

CSS

#hover1,#hover2,#hover3,#hover4
{
	width:100px;
	height:100px;
	float:left;
}
.portfolio_image_skin2
{
	width:100px;
	height:100px;
    margin-right:10px;
}
#mask1,#mask2,#mask3,#mask4
{
	opacity:1;
	background-color:#0CF;
}
#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 ~ #hover1 #mask1
{
    /* CSS */
	display:block!important;	
	opacity:0.5;
	transition: 0.5s all;
	padding-right:19px;		
}
#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;		
}