Prueba con algo así...
.post a:hover h2 { display:block; }
El 14 de abril de 2010 16:40, Jairo Ochoa <[email protected]> escribió:
> Hola,
>
> Estaba pensando en hacer un efecto rollover de manera que al pasar por
> encima de una imagen se muestre una capa con un texto.
> Lo usaré como un link a otra página.
>
> Tengo este codigo html (que puedo cambiar si fuese necesario)
>
> <div class="post">
> <a href="enlace.php">
> <h2><span>mi titulo</span></h2>
> <img class="thumbnail" src="imagen.jpg" />
> </a>
> </div>
>
> Y este css (que también puedo cambiar si lo consideráis)
>
> .post {
> float: left;
> position: relative;
> width: 110px;
> height: 110px;
> }
>
> .post h2 {
> display: none;
> position: absolute;
> top: 55px;
> left: 0;
> width: 100px;
> height: 55px;
> background: url('images/mascara.png');
> }
>
> .post .thumbnail {
> width: 110px;
> height: 110px;
> }
>
>
> El resultado que obtengo es una imagen de 110x110px con una capa (con alfa)
> que cubre la mitad de la imagen.
> Dentro de esa capa un texto.
>
> ¿Qué es lo que quiero?
>
> 1) Que esa capa esté oculta siempre, mostrándose la imagen completa.
> 2) Que esa capa se muestre al pasar por encima de la imagen, de manera que
> puede leerse el texto.
> 3) Que al retirar el ratón la capa se vuelva a ocultar.
>
>
> ¿Es posible hacerlo sólo con css, sin usar js?
> Si fuese necesario js, utilizo jquery en la misma web.
>
>
> Gracias de antemano.
>
> Un saludo,
> --
>
> Jairo Ochoa
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
