Sí que era fácil, pero no sé como me lié y esto es lo que había hecho:
.post h2:hover { display:block; }
Muchas gracias!
--
Jairo Ochoa
El 14 de abril de 2010 18:01, Reactivo Química Visual
<[email protected]>escribió:
> 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
>
_______________________________________________
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
