Desenfocar una imagen con CSS

Para desenfocar una imagen usando solo CSS utilizaremos la propiedad blur.

.img-blur {
    filter: blur(8px);
    -moz-filter: blur(8px);
    -webkit-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
}

Al desenfocar la imagen, según el desenfoque que le demos el tamaño de la imagen se verá aumentado. Para contrarestar el cambio de tamaño usaremos la propiedad transform.

.img-blur {
    filter: blur(8px);
    -moz-filter: blur(8px);
    -webkit-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    transform: scale(0.92);
    -webkit-transform: scale(0.92);
    -moz-transform: scale(0.92);
}