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.

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