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

I removed some superfluous markup (the circle and square containers... only needs one) and styled the img itself:

#wrapper {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

#test {
  width: 100%;
  height: 100%;
  transition: all 2s linear;
}

#test:hover {
  transform: scale(1.2);
}

<div id="wrapper">
  <img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA1LzA4L2JlL2JhYmllc193aXRoLjA5NGNjLnBuZwpwCXRodW1iCTg1MHg1OTA-CmUJanBn/8f195417/e44/babies_with_swagg.jpg" id="test">
</div>

Answer 2

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

Answer 3

Add this code to your parent div and solve problem :

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);

Answer 4

It appears as though you were styling one too many elements! I've created a fork here

I edited some of your SASS code to utilize the compass library and make better use of the transition and transform properties which can be seen here:

body { padding: 3em; }

.circle {
    height: 500px;
    width: 500px;
    border: 1px solid black;
    @include border-radius(500px);
    overflow: hidden;
}

.circle img {
    height: 500px;
    width: 500px;
    @include transition(all 0.3s ease);
    &:hover { @include transform(scale(1.1)); }
}

Hopefully this helps! Just think of the circle element as the parent container which has general information about the space (e.g. 500px wide and 500px tall). The image itself has a rounded border of 500px. This is the element you want to edit! You can scale and transform this element here without interacting with the parent circle container. Reference compass for additional information about using the library! Good luck!