♥Home♥ ♥Afiliados♥ ♥Afiliame!♥ ♥Premios♥ ♥Mis Dibujitos♥ ♥LIBROS EN PDF PARA DESCARGAR♥

jueves, 17 de octubre de 2013

4

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


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

4 comentarios:

  1. Hola!
    Tengo una pregunta, cómo se vería el zoom? y otra, yo pongo el ctrl + f para buscar el código pero no me lo busca o-o

    ResponderEliminar
    Respuestas
    1. Mmm ..
      EL zoom se veria si pinchas donde pone ''click aqui'' .. al principio hablo de la vista previa xD
      Y ahi ves como se ve .. lo de ctrl + f ..
      mira tu vas y donde esta todo el texto html haces click donde quieras .. luego pones ctrl + f y escribes la palabra ..
      y ya me dices si te va Ok? ..
      Besitos ^^

      Eliminar
  2. realmente lo agradezco pero ya no uso plantillas blogger u.u solo blogskin por lo que no se donde colocar esto u.u

    ResponderEliminar
    Respuestas
    1. Oh, perdon >w<
      acabo de ver el comentario aqui pendiente por responder D:
      MM.. Bueno no pasa nada ;)
      Creo que en un futuro no muy lejano hare algunas plantillas de blogskin .. a ver ;)
      Besitos ^^

      Eliminar

Procedencia de los visitantes ^3^