JSFiddle - React, Tailwind, and code Playground

HTML

<div id="padre">
    <p>Acá va la imagen 1</p> 
<div id="sobreimg">
    <p>Y Acá la imagen 2 con transparencia</p>
</div>
</div>

CSS

#padre{
    background:#f00;
    height:300px;
    position:relative;
    text-align:center;    
    width:300px;  
}
p{color:#fff;
    font-size:50px;}
#sobreimg{
    background:#aaa;
    display:none;
    height:300px;
    position: absolute; left:0; top:0;
    opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */
    width:300px;
}
#padre:hover #sobreimg{display:block;}