Search code examples
csshoverblurflicker

Images border-radius doesn't work during css transition

I'm using border-radius: 50%; to make an image round. By default the image is blurred and zoomed (with a hidden overflow) and on hover it will remove the blur and zoom. However, when I use a CSS transition on the element, it temporarily shows the overflow for the duration of the transition.

http://jsfiddle.net/jonny_me/cyvL61qx

Solution

  • I believe on transition, the element gets taken out of document flow, something like a shadow position: relative; and put back in once the animation is complete.

    If you force the z-index of the parent to be higher than that of the child, the parent should continue to clip 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;
}