Border-radius images do not work during css transition

Question

I use border-radius: 50%; to make the image round. By default, the image is blurry and scaled (with hidden overflow), and when you hover over it, blur and zoom are reduced. However, when I use a CSS transition to an element, it temporarily shows an overflow for the duration of the transition.

http://jsfiddle.net/jonny_me/cyvL61qx

Answer 1

I believe in the transition, the element is extracted from the document flow, something like a shadow position: relative; and comes back after completion of animation.

If you force the z-index parent to be higher than the parent, the parent must continue to trim the overflow.

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

Just draw a radius radius

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