Tutorial:Efecto Imagen Desenfoque ♥

Hola  hoy les traigo un tutorial de efecto en las imagenes ,que desenfocca a la imagen,se pone borrosita  aqui les dejo una muestra como queda:

(Pasa el cursor sobre la imagen)


PARA LAS IMAGENES QUE DESEES QUE TENGA ESTE EFECTO:

Para Plantilla Basica o Blogger: Ir a Plantilla/Edicion Html/Buscar con Ctrl +F  ]]></b:skin>
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo antes de </style>
.desen{-webkit-transition-duration: .60s;}
.desen:hover{-webkit-filter: blur(2px);-moz-filter: blur(2px);-ms-filter: blur(2px);-o-filter: blur(2px);filter: blur(2px);}

y listo lo guardan.
Luego si la quieres colocar una imagen con este efecto a tu entrada (te vas a Html) o a uno de tus gadgets (te vas a añadir un nuevo gadget/htmlJavascript) solo copia el siguiente codigo:
<img class="desen" src="Url de tu Imagen" width="240" />
240:es el ancho de la imagen,disminuye el numero si es muy ancho.
y listo
PARA TODAS LAS IMAGENES 
Para Plantilla Basica o Blogger: Ir a Plantilla/Edicion Html/Buscar con Ctrl +F  ]]></b:skin>
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo antes de </style>
img{
-webkit-transition-duration: .60s;
 }
img:hover{
 -webkit-filter: blur(2px);-moz-filter: blur(2px);-ms-filter: blur(2px);-o-filter: blur(2px);filter: blur(2px);
}
y listo,todas las imagenes tendran este efecto 



6 comentarios :

  1. waaa gracias por la tutorial!
    saludos

    ResponderEliminar
  2. gracias por el tutorial =)
    besos~~

    ResponderEliminar
  3. hermoso efecto! *u* me encanta, muchas gracias por el tutorial! <3

    ResponderEliminar
  4. Muy bueno me encanto C:!! Gracias por el tuto

    ResponderEliminar
  5. me gusta este efecto pero me mareo con el u.u

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥