Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 431
Jonny Avatar asked Jan 14 '15 02:01

Jonny


People also ask

Why border-radius is not working?

If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working. This answer worked for me.

How do you put a radius on a border in CSS?

CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.

Should I use REM for borders?

It is generally safest to use the same unit for different dimensions, and this applies to border-radius , too, when the height and width of the element have been set in rem units. The reason is that this ensures that the shape is preserved if the font size of the root element is changed.

How do you reset border-radius in CSS?

Show activity on this post. -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; border: 0; That should reset the borders.


1 Answers

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;
}
like image 163
Ming Avatar answered Sep 18 '22 06:09

Ming