JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="img-bg">
        <img src="http://sp-friends.ru/admingo/uploadimg/355/big_ceeffdf9c1e31059b0a54e2b80bcfdb0.jpg" alt="">
        <div class="grey"></div>
    </div>
    
</div>

CSS

.img-bg {
    height: 480px;
    position: relative;
    overflow: hidden;
    width: 800px;
}

.grey {
    width: 100%;
    height: 100%;
    background-color: grey;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
}

.img-bg:hover .grey {
    display: none;
}