JSFiddle - React, Tailwind, and code Playground

HTML

<div id="recuadro">
<div id="recuadro_trans"><h1>Titulo</h1><h2>texto a mostrarse cuando alguien pasa por arriba con el mouse.</h2>
</div>
</div>

CSS

#recuadro{
width:636px;
height:225px;
background:green;
}

#recuadro_trans{
background: rgba(0,0,0,0.7);
width:310px;
height:115px;
margin-bottom:30px;
padding:5px;
text-align:left;
}


#recuadro_trans h1{
color:white;
font-size:18px;
position: relative;
}

#recuadro_trans h2{
color:#58ACFA;
font-size:12px;
display:none;    
}
#recuadro_trans:hover h2{display:block;}