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
