Animación Zoom CSS con leyenda para las imágenes

Hola amigos de Mil Trucos Blogger, luego de pasar algunos días sin publicar un tutorial hoy volvemos al ruedo y en gran forma con un genial truco que consta de una espectacular animación para las imágenes, al pasar el cursor sobre la imagen se ejecuta un efecto zoom además de mostrarse una pequeña leyenda en la parte superior de la imagen.

El truco se ve de la siguiente manera:

Para agregar este truco a tu blog, debes ir a Diseño – Diseñador de plantilla – Avanzado – Añadir CSS, y allí agregas lo siguiente:

.titlezoom{display:inline-block;overflow:hidden;position:relative;text-decoration:none}
.titlezoom:before{display:block;background-color:#000;content:"";height:100%;opacity:0;position:absolute;width:100%;z-index:2}
.titlezoom:after{display:block;background-color:rgba(255,255,255,0.8);color:#000;content:attr(title);left:-100%;position:absolute;text-align:center;text-transform:uppercase;top:5%;width:94%;z-index:3;padding:2% 3%}
.titlezoom img{border:none;display:block;z-index:1}
.titlezoom:before,.titlezoom:after,.titlezoom img{-webkit-transition:all 200ms ease;-moz-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease}
.titlezoom:hover img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}
.titlezoom:hover:before{opacity:0.3}
.titlezoom:hover:after{left:0}

Ahora en la edición html de una entrada tendrás que agregar al código de la imagen lo siguiente:

class="titlezoom" title="Leyenda de tu imagen"

Quedando el HTML de una imagen como la siguiente:

<div class="separator" style="clear: both; text-align: center;">
<a class="titlezoom" title="Imagen de Prueba MilTrucos Bloger" href="http://www.miltrucosblogger.com/wp-content/uploads/2014/09/Animaci-C3-B3n-2BZoom-2BCSS-2Bcon-2Bleyenda-2Bpara-2Blas-2Bim-C3-A1genes.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.miltrucosblogger.com/wp-content/uploads/2014/09/Animaci-C3-B3n-2BZoom-2BCSS-2Bcon-2Bleyenda-2Bpara-2Blas-2Bim-C3-A1genes.jpg" height="400" width="285" /></a></div>

Siendo la parte resaltada en color azul lo que se ha agregado al código html de la imagen.

Espero que les haya gustado el tutorial y por favor no olvides compartir este post en tus redes sociales.

Vía/ Spiceupyourblog 

0
Shares

4 thoughts on “Animación Zoom CSS con leyenda para las imágenes

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *