Efecto Zoom con Subtítulos para las Imágenes con CSS3

En está ocasión me gustaría mostraros un efecto de animación, para vuestras imágenes, que al pasar el cursor por encima, procederá a visualizarse un título con la descripción de la fotografía empleada, en dicha ocasión, empleando dicho efecto zoom, en este caso citado. Éste truco, se elaborara mediante estilos CSS3, transiciones, transformaciones de escalas, antes y después (before and after) y hover (encima), en resumidas cuentas, cómo podréis ver en el siguiente ejemplo de demostración y su respectivo código de estilos CSS3, para su correcto funcionamiento. Ahora la demostración, y luego, el código CSS y el HTML para dar la llamada al mencionado efecto, si os gusta lo podéis copiar y pegar. Enjoy this tip!

Código CSS para añadir en blogger los estilos CSS!

1. Ir a Blogger
2. Después a Plantilla.
3. Y ahora ir a Editar HTML.
4. Añade el siguiente código antes de ]]></b:skin>:

.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.8);-moz-transform:scale(1.8);-ms-transform:scale(1.8);-o-transform:scale(1.8);transform:scale(1.8)}
.titlezoom:hover:before{opacity:0.2}
.titlezoom:hover:after{left:0}

Código HTML para usar el efecto en imágenes cuando lo desees!

<div class="separator" style="clear: both; text-align: center;">
<a class="titlezoom" href="Aquí_la_URL_de_la_ruta_de_imagen_seleccionada" title="Título_de_la_fotografía_al_pasar_el_cursor"><img border="0" src="Repetir_ de_nuevo_la_URL_de_la_imagen_seleccionada" height="450" width="500" /></a></div>

1. En el último código HTML, puedes modificar lo siguiente:
2. Tamaño: height y width (alto y ancho) en pixeles sobre la imagen.
3. Title= títul0 de la fotografía al pasar el cursor, al hacer hover.
4. Y por último, debes de añadir la URL de las imágenes, dos veces, la ruta de las imágenes.

Get free premium widgets for your blog and website.