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 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.