Zoom CSS con leyenda para imagenes

Hoy traigo un pequeño truco que puedes emplear a tu blog, tiene muy buena pinta pues hace ver a tu blog de una forma mas profesional limpia y moderna acorde al año en el que nos encontramos. Se trata de un pequeño zoom que se le hace a las imágenes cuando pasas el cursos sobre ella, también despliega una leyenda que hace que la imagen tenga mas presentación.

Para que tu puedas añadir este truco a tu blog, puedes hacerlo mediante la siguiente secuencia: Diseño - Diseñador de plantilla - Avanzado - Añadir CSS, ya que estas en esta parte de tu blog tienes que pegar el siguiente código que te proporcionaré:

.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}

Ya  que el código se ha añadido, en la entrada HTML de algún articulo que quieras implementarlo tienes que agregar el siguiente código.

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

Aquí un ejemplo de como quedaría nuestro código bien implementado:

<div class="separator" style="clear: both; text-align: center;">
<a class="titlezoom" title="Imagen de Prueba " href="http://1.bp.blogspot.com/-9_FfkLoLmmM/VA3f7auPK8I/AAAAAAAAEgI/Mgmu5M3nl2A/s1600/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://1.bp.blogspot.com/-9_FfkLoLmmM/VA3f7auPK8I/AAAAAAAAEgI/Mgmu5M3nl2A/s1600/Animaci%C3%B3n%2BZoom%2BCSS%2Bcon%2Bleyenda%2Bpara%2Blas%2Bim%C3%A1genes.jpg" height="400" width="285" /></a></div>

Lo que se encuentra en rojo es la leyenda que aparecerá en tu imagen, en azul se encuentran las url de las imágenes.
Si quieres recibir mas Gadgets, Widgets, Trucos y Tutoriales para blogger directamente por correo electrónico suscribete gratis a nuestro blog, visita nuestra página de facebook o añade nuestro feed Rss.