Habiendo abordado este mismo problema hoy, me gustaría presentar una solución que (actualmente) funciona en los principales navegadores. Algunas de las otras respuestas en esta página funcionaron una vez, pero las actualizaciones recientes, ya sea del navegador o del sistema operativo, han anulado la mayoría / todas estas respuestas.
La clave es colocar la imagen en un contenedor y transformar: escalar ese contenedor fuera de su desbordamiento: padre oculto. Luego, el desenfoque se aplica al img dentro del contenedor, en lugar de al contenedor en sí.
Violín de trabajo: https://jsfiddle.net/x2c6txk2/
HTML
<div class="container">
<div class="img-holder">
<img src="https://unsplash.it/500/300/?random">
</div>
</div>
CSS
.container {
width : 90%;
height : 400px;
margin : 50px 5%;
overflow : hidden;
position : relative;
}
.img-holder {
position : absolute;
left : 0;
top : 0;
bottom : 0;
right : 0;
transform : scale(1.2, 1.2);
}
.img-holder img {
width : 100%;
height : 100%;
-webkit-filter : blur(15px);
-moz-filter : blur(15px);
filter : blur(15px);
}
margin
se requiere.img
está dentro dediv
yblur
está desbordando los límites dediv
. Laoverflow: hidden;
corta.