Obrazy obramowania nie działają podczas przejścia css

Question

Używam border-radius: 50%; do robienia zdjęć. Domyślnie obraz jest rozmazany i powiększany (z ukrytym przelewem), a po najechaniu powoduje usunięcie rozmycia i powiększenia. Jednak, gdy używam przejścia CSS na elemencie, tymczasowo pokazuje on przepełnienie na czas trwania przejścia.

http://jsfiddle.net/jonny_me/cyvL61qx

Answer 1

wierzę na przejściu, element zostanie wycofany z obiegu dokumentów, coś jak cień position: relative; i umieścić z powrotem w po zakończeniu animacji.

Jeśli wymusisz, aby rodzic z-index był wyższy od elementu podrzędnego, rodzic powinien kontynuować przycinanie przepełnienia.

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

Tylko border-radius dziedziczyć

.parent { 
    border-radius: 50%; 
} 

.parent img { 
    border-radius: inherit; 
}