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.

score 50 · Answer 1 · answered Oct 14 '14 at 10:13

50

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

answered Oct 14 '14 at 10:13

David Nazar

556
1
4
10

5

I already had `position:relative`, but adding `z-index:1` fixed it. Thank you! – Morgan Delaney Nov 13 '14 at 17:59
2

Thanks David, this was bugging me for ages. – Jamie Wade Jul 29 '15 at 11:22
1

Yes this solution worked a treat for me. I wasn't using a circle, so didn't want to use the mask. Seems kind of obvious now. – alxrb Aug 27 '15 at 12:47
1

Another +1 here, this works when you have an image inside an anchor with rounded corners and want to 'zoom in' on hover. Simple when you think about it. Thanks – Matt Jan 28 '16 at 13:07
1

This is better answer as using mask also hides box-shadow. – Láďa Durchánek Mar 05 '16 at 04:07
1

This has helped me, thanks! Lesson learned - always apply some kind of positioning to the block element. Block in BEM methodology. – Selrond Mar 01 '17 at 09:30
It seems that fix doesn't work anymore (17th of May, 2017; Chrome 58). – Bram Vanroy May 17 '17 at 06:19
It is working for me here : http://codepen.io/DavidN/pen/dIzJK with Chrome Version 58.0.3029.110 (64-bit) – David Nazar May 17 '17 at 13:41

score 23 · Accepted Answer · edited May 17 '17 at 06:27

23

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>

edited May 17 '17 at 06:27

Bram Vanroy

27,032
24
137
239

answered Jun 01 '13 at 23:40

Aaron K

437
4
10

the circle should stay the same size – jshawl Jun 02 '13 at 00:06
1

dont over complecate it this is the answer position:relative; z-index:1; – J.Tural Feb 05 '16 at 23:37

score 5 · Answer 3 · answered Oct 07 '15 at 08:29

5

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

answered Oct 07 '15 at 08:29

Atakan Goktepe

110
2
8

2

Could you please elaborate more your answer adding a little more description about the solution you provide? – abarisone Oct 07 '15 at 08:49

djthoms · Answer 4 · 2013-06-02T00:11:25.483

3

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!

edited Jun 02 '13 at 00:11

answered Jun 01 '13 at 23:54

djthoms

3,026
2
31
56

It's weird that adding overflow:hidden to the image works. Shouldn't it be on the parent? – jshawl Jun 01 '13 at 23:57
The best way to find out is by trying! Remove the `overflow` property from `.circle img` and place it in `.circle` and see the results. Do you even need the `overflow` property? – djthoms Jun 02 '13 at 00:00
oh wait I just realized your fork makes the circle bigger. the circle should stay the same size. the image should get bigger – jshawl Jun 02 '13 at 00:05
see this fork. no border radius works. border radius doesn't http://codepen.io/jshawl/pen/skGJl – jshawl Jun 02 '13 at 00:09
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/31054/discussion-between-djthoms-and-jessh) – djthoms Jun 02 '13 at 00:13

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

4 Answers4

Linked