Reputation: 1071
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
Upvotes: 11
Views: 14947
Reputation: 3285
While debug-in I noticed that the problem disappeared when adding an outline
, so I've just added a transparent one, but I'm not sure why it worked.
Here is a codepen to show it working. (hover on the images, the last one is working)
Upvotes: 0
Reputation: 2200
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.
Upvotes: 0
Reputation: 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.
Upvotes: 0
Reputation: 2234
Just make border-radius inherit
.parent {
border-radius: 50%;
}
.parent img {
border-radius: inherit;
}
Upvotes: 3
Reputation: 4588
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;
}
Upvotes: 33