Images border-radius doesn't work during css transition

Question

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

Answer 1

I had the same problem with an element growing with right corners while transitioning and once the transition is at end the round corners reappeared. I tried all the above solutions without success (except the clip-path because edge or IE don't support it).

Then I removed my filter and the transform worked. So my solution is to remove the filter to get it working at least with the zoom.

Answer 2

Just make border-radius inherit

.parent {
    border-radius: 50%;
}

.parent img {
    border-radius: inherit;
}

Answer 3

I had the same issue. Putting this css on the parent worked for me:

clip-path: circle(50% at center);
-webkit-clip-path: circle(50% at center);

tested on safari, firefox and chrome on mac and microsoft edge.

Answer 4

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;
}