JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
        <div class="overlay">какой-то текст</div>
     </div>

CSS

.wrap{
width:400px;
height:400px;
margin:0 auto;
background:red;
}

.overlay{
width:100%;
height:100%;
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;
}

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