Vamos a ver como añadir un texto que describa una imagen que hemos puesto en el blog, con la particularidad de que esta descripcion esta oculta. Al pasar el cursor del raton por encima de la imagen, esta aumenta un poco (con la propiedad transform) y por debajo asoma la descripcion automaticamente. Todo esto es posible gracias a la evolucion del CSS (llamada CSS3), sin codigos Javascript ni nada de nada.
Aqui tienes un ejemplo con 2 imagenes. Pasa el cursor por encima de ellas:
Este es uno de los posibles logos o banners de mi proximo proyecto. Un directorio de blogs llamado Blogs en Red.
|
Si, ya se, es Pilar Rubio. Es que me encanta esta chica. ¿Esta guapa en la foto, eh? ejem...
|
Para poner este efecto en nuestro blog, lo primero que tenemos es que añadir el CSS en la plantilla, antes de </head>. Lo que esta en rojo es el ancho de la descripcion, que por lo general tiene que ser igual que el de la imagen.
<style>
.imagepluscontainer{
position: relative;width: 250px;
z-index: 1;
}
.imagepluscontainer img{
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img{
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); color: white;
-moz-border-radius: 0 0 8px 8px;-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a{
color: white;
}
.imagepluscontainer:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}
</style>
Una vez hecho esto, cada vez que querais añadir este efecto en una imagen, poneis el siguiente codigo, poniendo la url de la imagen, la descripcion y el tamaño donde esta indicado en rojo.
<div class="imagepluscontainer" style=" z-index: 2;">
<img src="URL IMAGEN" height="250" width="250" /><div class="desc">DESCRIPCION</div></div>
