CODEWITHSUNDEEP
csscss-transitionscss-transforms
jshawl
jshawl

Reputation: 3483

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

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.

Upvotes: 21

Views: 16090

Answers (4)

Aaron K
Aaron K

Reputation: 437

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>

Upvotes: 23

Atakan Goktepe
Atakan Goktepe

Reputation: 110

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);

Upvotes: 5

David Nazar
David Nazar

Reputation: 556

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

Upvotes: 50

djthoms
djthoms

Reputation: 3096

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!

Upvotes: 3

Related Questions