Gente, tengo un problema para hacer que se muestre texto sobre una imagen cuando paso con el mouse por arriba.
Tengo una imagen de fondo, y un div con transparencia arriba, que ocupa la mitad de la imagen y tiene un titulo
quiero que al pasar el mouse por arriba, se extienda la transparencia por sobre toda la imagen, y abajo del texto se muestre un texto.
Probe de diversas maneras con display none, con piosition relative y absolute, etc.
pero me queda todo bien, salvo que el texto no se me muestra con el hover, o sea, toma el display none, pero cuando pongo que con hover sea display block no me lo muestra.
Que tendria que hacer con este codigo, para que funcione asi como quiero.
html:
<div id="recuadro1">
<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;
margin-bottom:30px;
background-image:url(/imgs.png);
}
#recuadro_trans{
background: rgba(0,0,0,0.7);
width:310px;
height:215px;
margin-bottom:30px;
padding:5px;
text-align:left;
}
#recuadro_trans:hover{
background: rgba(0,0,0,0.7);
width:626px;
height:215px;
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;
}
aclaro que ese es el codigo, sin todo lo que hice que probe y no me funciono, xq probe tantas veces y no me funcione, que volvi al codigo de antes, y quisiera saber entonces como tendria que hacer aca, para que ese h1 se muestre en la mitad de la imagen con la transparencia, y cuando paso con el mouse, el h1 se muestre un poco mas chico y se muestre tambien el h2
Gracias de antemano!