JSFiddle - React, Tailwind, and code Playground
HTML
<div class="products_container">
<div id="one" class="product_holder"></div>
<div id="two" class="product_holder"></div>
<div id="three" class="product_holder"></div>
</div>
CSS
#one {
top: 0;
left: 0;
background: #f00;
}
#two {
top: 50px;
left: 50px;
background: #0f0;
}
#three {
top: 100px;
left:100px;
background:#00f;
}
div {
width: 40px;
height: 40px;
position: absolute;
}
JavaScript
$('.products_container .product_holder').hover(
function() {
$(this).siblings().fadeTo("fast", 0.6);
}, function() {
$(this).siblings().fadeTo("fast", 1);
}
);