JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
     <div class="overlay">какой-то текст</div>
    <img src="http://alpatriott.ru/works/primer/images/yellowfon.png" alt=""/>
        
     </div>

CSS

.wrap{
width:400px;
height:300px;
margin:0 auto;
background:red;
overflow:hidden;
position:relative;
}

img{
display:block;
}
.overlay{
position:absolute;
width:400px;
height:300px;
color:lime;
background:rgba(0,0,0,0.7);
opacity:0;
-webkit-transition-property:opacity;
-webkit-transition-duration:0.5s;
-moz-transition-property:opacity;
-moz-transition-duration:0.5s;
-o-transition-property:opacity;
-o-transition-duration:0.5s;
z-index:2;
}

.wrap:hover .overlay{
opacity:1;
}