CODEWITHSUNDEEP
csshoverblurflicker
Jonny
Jonny

Reputation: 1071

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

Upvotes: 11

Views: 14947

Answers (5)

eloyesp
eloyesp

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

Christophe
Christophe

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

ronald
ronald

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

Amr Ibrahim
Amr Ibrahim

Reputation: 2234

Just make border-radius inherit 

.parent {
    border-radius: 50%;
}

.parent img {
    border-radius: inherit;
}

Upvotes: 3

Ming
Ming

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

Related Questions