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

Question

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 1

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