Mil Trucos Blogger

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

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

4 Comentarios

2 Pings/Trackbacks

  1. Anonymous Anonymous
    Septiembre 9, 2014    

    Me gustaria que nos indiques como configurar las descripciones e imagenes de los articulos de blogger para compartir en facebokk ..mil gracias de antemano

  2. Anonymous Anonymous
    Septiembre 9, 2014    

    Me gustaria que nos enseñes como compartir los articulos e imagenes de blogger en facebook y que al compartir se muestre la descripcion del articulo..mil gracias !!

  3. […] MilTrucosBlogger: Animación Zoom CSS con leyenda para las imágenes […]

  4. […] MilTrucosBlogger: Animación Zoom CSS con leyenda para las imágenes […]

  1. Efectos Hover para Imágenes - Hogar Bloguero on Abril 11, 2015 at 8:18 pm
  2. Efectos Hover para Imágenes - Rocío Bloguera on Enero 14, 2016 at 6:41 pm

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo