TUTORIAL: Efecto Zoom Para Imagenes :D

Holaa de nuevo!! .. os traigo un tutorial :D

Un efecto  Zoom Para Imagenes :D 

Para ver una vista previa de como seria

click aqui

plantilla -> edicion de html 

con ctrl + f buscas...

Si tienes plantilla Blogger: 

]]></b:skin>

Si tienes plantillas clásica: </style>

justo arriba pegas el siguiente código

/*Efecto Zoom

----------------------------------------------- */

.hovergallery img{

-webkit-transform:scale(1);

-moz-transform:scale(1);

-o-transform:scale(1);

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration: 0.5s;

opacity: 1;

margin: 0 0 0 0;

}

.hovergallery img:hover{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-o-transform:scale(1.1);

box-shadow:0px 0px 35px white;

-webkit-box-shadow:0px 0px 35px white;

-moz-box-shadow:0px 0px 35px white;

opacity: 1;

}

cuando quieras usar el efecto en un gadget solo debes poner el siguiente código...

<div class="hovergallery">

justo detrás del código de la imagen que quieras o las imágenes que quieras, ejemplo:

<div class="hovergallery">

<img src="url de tu imagen"/>

</div>

si son mas de una solo pon el código de las imagenes que quieras (<img src="url de tu imagen"/> varias veces y vas poniendo las diferentes urls) y luego finaliza el código con</div>

cuando quieras usar el efecto en una entrada debes poner el código que mencione anteriormente arriba de todo el código html de la entrada, asi...

Ahora para aplicarlo en todas las imágenes de tu blog...

con ctrl + f buscas...

Si tienes plantilla Blogger: 

]]></b:skin>

Si tienes plantillas clásica: </style>

justo arriba pegas el siguiente código

img{

-webkit-transform:scale(1);

-moz-transform:scale(1);

-o-transform:scale(1);

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration: 0.5s;

opacity: 1;

margin: 0 0 0 0;

}

img:hover{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-o-transform:scale(1.1);

box-shadow:0px 0px 35px white;

-webkit-box-shadow:0px 0px 35px white;

-moz-box-shadow:0px 0px 35px white;

opacity: 1;

}

guardas los cambios y listo ^^bueno eso es todo n.n cualquier pregunta o duda deja un comentario, tambien si tienes un problema hazmelo saber! si te gusto tambien comenta xD