border-radius在转换期间不起作用

Question

我正在使用遮罩元素剪辑图像，然后在悬停时缩放该图像。

我无法弄清楚为什么border-radius似乎在转换期间停止在masking元素上存在。

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)

Answer 1

尝试将z-index添加到将其放置在图像顶部的蒙版上。

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