overflow:hidden ignored with border-radius and CSS transforms (webkit only)

css css-transitions css-transforms
jessh picture jessh · Jun 2, 2013 · Viewed 15k times · Source

I want to have a square image inside a circle.

When the user hovers over the image, the image should scale (zoom in).

The circle should remain the same size.

Only during the CSS transition, the square image overlaps the circle (as if overflow:hidden weren't there at all).

Here's a demo with the weird behavior in Chrome and Safari: http://codepen.io/jshawl/full/flbau

Working ok in firefox.

Answer

David Nazar picture David Nazar · Oct 14, 2014

You need to add this code to the parent of your img : 

position:relative;
z-index:1;

Example here : http://codepen.io/DavidN/pen/dIzJK

Related questions

Prevent flicker on webkit-transition of webkit-transform

Possible Duplicate: iphone webkit css animations cause flicker For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing: CSS: #element { -webkit-transition: -webkit-transform 500ms; } JavaScript: $("#element").css("-webkit-transform", "…

Read More
Spin or rotate an image on hover

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :

Read More
Hover effect : expand bottom border

I'm trying to get a transition hover effect on border that the border expands on hover. I've tried this on Jsfiddle

Read More