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