transicion - Imágenes border-radius no funciona durante la transición css

transition css hover

Question

Estoy usando border-radius: 50%; para hacer una imagen redonda. De forma predeterminada, la imagen se ve borrosa y aumentada de tamaño (con un desbordamiento oculto) y al desplazarse sobre ella eliminará el desenfoque y el zoom. Sin embargo, cuando uso una transición de CSS en el elemento, muestra temporalmente el desbordamiento durante la transición.

http://jsfiddle.net/jonny_me/cyvL61qx

Answer 1

Creo en la transición, el elemento se saca del flujo de documentos, algo así como una position: relative; sombra position: relative; y vuelva a colocarlo una vez que la animación esté completa.

Si fuerza el z-index del padre a ser más alto que el del niño, el padre debe continuar recortando el desbordamiento.

http://jsfiddle.net/cyvL61qx/4/

figure.effect-park {
background-color: #0D4C16;
border-radius: 50%;
z-index: 1;
}
figure.effect-park img {
z-index: 0;
opacity: 0.5;
-webkit-filter: blur(1.5px);
filter: blur(1.5px);
-webkit-transform: scale(1.15);
transform: scale(1.15);
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
}

Answer 2

Simplemente haga que el radio del borde herede

.parent {
border-radius: 50%;
}
.parent img {
border-radius: inherit;
}