Prueba con algo así... .post a:hover h2 { display:block; }
El 14 de abril de 2010 16:40, Jairo Ochoa <jairo.oc...@gmail.com> 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 Ovillo@lists.ovillo.org > 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 Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo