JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrap">
<div>
<img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" />
<div class="company-image-overlay"></div>
</div>
<div>
<img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" />
<div class="company-image-overlay"></div>
</div>
<div>
<img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" />
<div class="company-image-overlay"></div>
</div>
<div>
<img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" />
<div class="company-image-overlay"></div>
</div>
</div>
CSS
.wrap div{
display: inline-block;
}
.company-image {
position:relative;
z-index:-1;
}
.company-image-overlay {
width: 160px;
height: 160px;
background-color: #ffb00f;
border-radius: 15px;
z-index: 1;
opacity: 0.5;
position: fixed;
top: 0.5em;
display:none;
}
JavaScript
$('.company-image-overlay').hide();
$('.wrap div').mouseover(function () {
$('.wrap div').not(this).children('.company-image-overlay').show();
console.log(1);
}).mouseout(function () {
$('.company-image-overlay').hide();
});