CSSの切り替え中にborder-radiusが機能しない

Question

border-radius: 50%;を使用して画像を丸くしています。デフォルトでは、画像はぼかされ、ズームされ（隠されたオーバーフローで）、ホバー上ではぼかしとズームが取り除かれます。しかし、要素上でCSSトランジションを使用すると、一時的に遷移のオーバーフローが表示されます。私は移行を信じる

http://jsfiddle.net/jonny_me/cyvL61qx

Answer 1

、要素は、ドキュメントフローの外に影position: relative;のようなものを撮影し、アニメーションが完了したらに戻されます。

親のz-indexが子の親よりも強くなると、親はオーバーフローを継続してクリップする必要があります。

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

ちょうど私は同じ問題を抱えている国境半径は

.parent { 
    border-radius: 50%; 
} 

.parent img { 
    border-radius: inherit; 
}