problema para hacer que se muestre texto sobre una imagen con hover

pouparo · #1 (**permalink**) 06/11/2013, 09:15

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!

C2am · #2 (**permalink**) 06/11/2013, 11:40

Código HTML:

Ver original<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>

Código CSS:

Ver original#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;}

Por ejemplo:
http://jsfiddle.net/c2am/8cHQN/10/embedded/result/

Faks · #3 (**permalink**) 06/11/2013, 12:25

A ver si te sirve...

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
 
<style>
 
h1 {
    font-size: 1em;
    color: #fff; 
    display: block;
    padding-top: 10px;
    height: 35px;
    background: rgba(0,0,0,0.5);
    margin: 5px;
}
 
#imagen {
    width: 400px;
    height: 300px;
    background: url('http://2.bp.blogspot.com/-Pjr77WToV9Y/TyZg9C6vVZI/AAAAAAAACGs/ihG8pOVboHE/s400/lamborghini-murcielago-wallpaper+6.jpg');
}
 
/* esto hace que este siempre oculto el texto */
#texto {
    display: none; 
}
 
/* este estilo miestra el texto cuando se pasa el cursor en la imagen */ 
#imagen:hover #texto{ 
        display: inline; 
}
 
</style>
 
</head>
<body>
 
<div id="imagen">
    <div id="texto">
        <h1>Este texto se muestra solo en hover</h1>
    </div>
</div>
 
</body>
</html>

pouparo · #4 (**permalink**) 06/11/2013, 19:17

gracias por las respuestas a ambos! cuando vi la respuesta de c2am ya me di cuenta de lo que hacia mal y ya lo arregle! y funciono!
mi error era que le ponia class al h2 y le daba el estilo al class ese, xq pensaba que si ponia #recuadro_trans:hover h2{display:block;} no me iba a servir xq yo solo queria que el h2 no se mostrara, pero el h1 si...no se xq pensaba eso...xq en realidad basta con solo ponerle al h2 display:none; y al h1 no ponerselo!

Saludos y gracias por la ayuda!!