JSFiddle - React, Tailwind, and code Playground

HTML

<div  class="mainBox">
<div class="mask portfolio_box_skin_2">
<div class="portfolio_image_skin2">
Content1
</div>
<div class="cleardiv"></div>	
</div></div>

<div  class="mainBox">
<div class="mask portfolio_box_skin_2">
<div class="portfolio_image_skin2">
Content2
</div>
<div class="cleardiv"></div>	
</div></div>

<div  class="mainBox">
<div class="mask portfolio_box_skin_2">
<div class="portfolio_image_skin2">
Content3
</div>
<div class="cleardiv"></div>	
</div></div>

<div  class="mainBox">
<div class="mask portfolio_box_skin_2">
<div class="portfolio_image_skin2">
Content4
</div>
<div class="cleardiv"></div>	
</div></div>

CSS

.mainBox
{
	width:100px;
	height:100px;
	float:left;
}
.portfolio_image_skin2
{
	width:100px;
	height:100px;
    margin-right:10px;
}
.mask
{
	opacity:1;
	background-color:#0CF;
}
.maskHover
{
    /* CSS */
	display:block!important;	
	opacity:0.5;
	transition: 0.5s all;
	padding-right:19px;		
}

JavaScript

$(".mainBox").hover(function(){
    $( ".mainBox" ).each(function() {
        $(this).children(".mask").toggleClass('maskHover');
    });
    $(this).children(".mask").removeClass('maskHover');
});