1

I'm using a masking element to clip an image and then scaling that image on hover.

I can't figure out why the border-radius seems to stop existing on the masking element during transition.

http://codepen.io/corysimmons/pen/rOvdXX?editors=110

<div class="mask">
  <img src="http://placekitten.com/505/505">
</div>

.mask
  overflow: hidden
  width: 300px
  height: 300px
  border-radius: 999em
  img
    transition: all 500ms ease
  &:hover
    img
      transform: scale(1.2)
corysimmons
  • 7,296
  • 4
  • 57
  • 65
  • 1
    This looks like a safari problem – Jacob G Oct 28 '15 at 16:53
  • 1
    You should use `border-radius: 50%;` for a circle. – Wavemaster Oct 28 '15 at 17:06
  • I don't see the issue is this in a certain browser that this occurs? –  Oct 28 '15 at 17:28
  • @kfreeman04208: That might be because OP seems to have added `z-index: 1` (the fix) into the pen. The code in question doesn't have it. This issue is a known behavior (atleast in Chrome and other webkit powered browsers). – Harry Oct 29 '15 at 05:30

1 Answers1

1

Try and add z-index to the mask placing it on top of the image.

.mask
  overflow: hidden
  width: 300px
  height: 300px
  border-radius: 50%
  z-index : 1;
  position : relative;
  img
    transition: all 500ms ease
  &:hover
    img
      transform: scale(1.2)
Millard
  • 1,157
  • 1
  • 9
  • 19