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
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.
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.
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.
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.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With