Efecto Blur (Desvanecimiento) a una imagen con CSS3

Entre otros efectos que hemos visto están; efecto en escala de grises, efecto Sepia, efecto saturado, el efecto de invertir los colores y el efecto de contraste, hoy veremos cómo agregar el efecto de “Desvanecimiento” a una imagen.

Blur

Aquí aplicamos blur(10px) esto hará un efecto de desvanecimiento:

La opción es Blur(10px) donde el porcentaje es que tanto quieres que el filtro actue.

-webkit-filter: blur(10px); /* Chrome - Safari */
-moz-filter: blur(10px); /* Firefox */
-ms-filter: blur(10px); /* IE9 */
-o-filter: blur(10px); /* Opera */

El ejemplo lo realizaremos con esta imagen http://www.mundonets.com/images/paisaje-rural-hd.jpg

Le agregamos el estilo: style=" -webkit-filter : blur(10px);-moz-filter: blur(10px); -ms-filter: blur(10px); -o-filter: blur(10px); "

El código de la imagen quedaría asi:

<img src="http://www.mundonets.com/images/paisaje-rural-hd.jpg" style="width : 400px; -webkit-filter : blur(10px);-moz-filter: blur(10px); -ms-filter: blur(10px); -o-filter: blur(10px); ">

Esta es la imagen original:



Este es el resultado con el efecto: