Efecto zoom en las imágenes de Blogger

Las imágenes son una parte fundamental de los sitios web, es por ello que siempre es buena idea darles algún efecto extra que logre hacerlas visualmente más atractivas, en ese orden de ideas hoy veremos como añadir el efecto zoom en las imágenes de Blogger.

Efecto zoom en las imágenes de Blogger


Para agregar este truco a tu blog ve a Tema, Editar HTML y busca el siguiente código:
]]></b:skin>

Arriba de la línea anterior pega el siguiente CSS:
.img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.img :hover {
margin-top: 2px;
}

Ahora desde la Vista en HTML de una entrada o desde un gadget HTML/JavaScript pega lo siguiente:
<a class="img-zoom" href="URL QUE ENLAZA LA IMAGEN" target="_blank">
 <img src="URL DE LA IMAGEN" /></a>
<style type="text/css">
.img-zoom{
 -webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 2; margin: 0 0px 0px 0;
}
.img-zoom :hover{
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
opacity: 1;
 }
</style>

Solo queda reemplazar lo resaltado en negrita por lo que se indica en cada caso y guardar los cambios.

El truco funciona de la siguiente manera:


Entradas que pueden interesarte

disqus