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