Bilder Grenze-Radius funktioniert nicht während CSS-Übergang

Question

Ich verwende border-radius: 50%;, um ein Bild rund zu machen. Standardmäßig ist das Bild verschwommen und gezoomt (mit einem versteckten Überlauf) und beim Schweben werden Unschärfe und Zoom entfernt. Wenn ich jedoch einen CSS-Übergang für das Element verwende, wird vorübergehend der Überlauf für die Dauer des Übergangs angezeigt.

http://jsfiddle.net/jonny_me/cyvL61qx

Answer 1

ich beim Übergang glaube, wird das Element aus Dokumentenfluss, so etwas wie ein Schatten position: relative; und wieder in einmal die Animation abgeschlossen ist genommen.

Wenn Sie erzwingen, dass die z-index des übergeordneten Elements höher als die des untergeordneten Elements ist, sollte das übergeordnete Element weiterhin den Überlauf abschneiden.

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

Gerade border-radius

.parent { 
    border-radius: 50%; 
} 

.parent img { 
    border-radius: inherit; 
}