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{
margin:0 auto;
background:red;
overflow:hidden;
position:relative;
}

img{
display:block;
}
.overlay{
position:absolute;
top: 0;
    left: 0;
    right: 0;
    bottom: 0;
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;
}