Bordes definidos con desenfoque de filtro CSS3

Estoy difuminando algunas imágenes con este código

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

Sin embargo, los bordes de la imagen también se vuelven borrosos. ¿Es posible difuminar la imagen manteniendo los bordes definidos? ¿Como una imagen borrosa o algo así?

Podrías ponerlo en <div>con overflow: hidden;y configurar <img>en margin: -5px -10px -10px -5px;.

Manifestación:

Salida

CSS

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}
​

HTML

<div><img src="http://placekitten.com/300" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</div>​​​​​​​​​​​​

Pude hacer que esto funcionara con el

transform: scale(1.03);

Propiedad aplicada sobre la imagen. Por alguna razón, en Chrome, las otras soluciones proporcionadas no funcionarían si hubiera algún elemento principal relativamente posicionado.

Consulte http://jsfiddle.net/ud5ya7jt/

De esta manera, la imagen se ampliará ligeramente en un 3% y los bordes se recortarán, lo que no debería ser un problema en una imagen borrosa de todos modos. Funcionó bien en mi caso porque estaba usando una imagen de alta resolución como fondo. ¡Buena suerte!

Usé -webkit-transform: translate3d(0, 0, 0);con overflow:hidden;.

DOM:

<div class="parent">
    <img class="child" src="http://placekitten.com/100" />
</div>

CSS:

.parent {
    width: 100px;
    height: 100px;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
}
.child {
    -webkit-filter: blur(10px);
}

DEMO: http://jsfiddle.net/DA5L4/18/

Esta técnica funciona en Chrome34 y iOS7.1

Actualizar

http://jsfiddle.net/DA5L4/50/

si usa la última versión de Chrome, no necesita usar -webkit-transform: translate3d(0, 0, 0);hack. Pero no funciona en Safari (webkit).

También puede conservar el video completo, no tiene que cortar nada.
Puede superponer sombras insertadas sobre los bordes borrosos en blanco.

Esto también se ve muy bien :)

Simplemente pegue este código al padre de sus videos:

.parent {
    -webkit-box-shadow: inset 0 0 200px #000000;
       -moz-box-shadow: inset 0 0 200px #000000;
            box-shadow: inset 0 0 200px #000000;
}

En las muchas situaciones en las que la IMG se puede colocar en la posición: absoluta , puede usar un clip para ocultar los bordes borrosos, y el DIV externo es innecesario.

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    position: absolute;
    clip: rect(5px,295px,295px;5px);
}

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);
}

Solo una pista para esa respuesta aceptada, si está usando la posición absoluta, los márgenes negativos no funcionarán, pero aún puede establecer la parte superior, inferior, izquierda y derecha en un valor negativo, y ocultar el desbordamiento del elemento principal.

La respuesta acerca de agregar un clip a la imagen de posición absoluta tiene un problema si no conoce el tamaño de la imagen.

Inserte la imagen dentro de un con position: relative;yoverflow: hidden;

HTML

<div><img src="#"></div>

CSS

div {
    position: relative;
    overflow: hidden;
}
img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
}

Esto también funciona en elementos de tamaño variable, como div dinámicos.

Puede evitar que la imagen se superponga a sus bordes recortando la imagen y aplicando un elemento de envoltura que establece el efecto de desenfoque en 0 píxeles. Así es como esto luce:

HTML

<div id="wrapper">
  <div id="image"></div>
</div>

CSS

#wrapper {
  width: 1024px;
  height: 768px;

  border: 1px solid black;

  // 'blur(0px)' will prevent the wrapped image
  // from overlapping the border
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}

#wrapper #image {
  width: 1024px;
  height: 768px;

  background-image: url("../images/cats.jpg");
  background-size: cover;

  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);

  // Position 'absolute' is needed for clipping
  position: absolute;
  clip: rect(0px, 1024px, 768px, 0px);
}

La forma más sencilla es simplemente agregar un borde transparente al div que contiene la imagen y establecer su propiedad de visualización en bloque en línea de la siguiente manera:

CSS:

div{
margin: 2rem;
height: 100vh;
overflow: hidden;
display: inline-block;
border: 1px solid #00000000;
}

img {
-webkit-filter: blur(2rem);
filter: blur(2rem);
}

HTML

<div><img src='https://images.unsplash.com/photo-1557853197-aefb550b6fdc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80' /></div>

Aquí hay un codepen que representa lo mismo: https://codepen.io/arnavozil/pen/ExPYKNZ

Puede intentar agregar el borde en otro elemento:

DOM:

<div><img src="#" /></div>

CSS:

div {
   border: 1px solid black;
}
img {
    filter: blur(5px);
}

Descubrí que, en mi caso, no tenía que agregar un contenedor.

Acabo de agregar -

margin: -1px;

o

margin: 1px; // any non-zero margin
overflow: hidden;

Mi elemento borroso estaba absolutamente posicionado.

Aquí hay una solución que se me ocurrió que mantiene el 100% de la imagen y no se necesita recorte:

Básicamente, hago un espejo en mosaico la imagen en una cuadrícula de 3x3, luego desenfoco todo y luego hago zoom en la imagen central creando efectivamente bordes repetidos al desenfocar efectos posteriores, es un poco extraño que css3 no tenga bordes repetidos integrados.

Enlace al método / código: ¿Cómo desenfocar una imagen usando CSS3 sin recortar o difuminar los bordes?

Si está utilizando una imagen de fondo, la mejor manera que encontré es:

filter: blur(5px);
margin-top: -5px;
padding-bottom: 10px;
margin-left: -5px;
padding-right: 10px;