overflow:使用border-radius和CSS转换隐藏忽略(仅限webkit)

Question

我希望在圆圈内有一个方形图像.

当用户将鼠标悬停在图像上时,图像应缩放(放大).

圆圈应保持相同的大小.

仅在CSS过渡期间,方形图像与圆形重叠(好像溢出:隐藏不存在).

以下是Chrome和Safari中奇怪行为的演示:http: //codepen.io/jshawl/full/flbau

在Firefox中工作正常.

Answer 1

您需要将此代码添加到img的父级:

position:relative;
z-index:1;

例如:http://codepen.io/DavidN/pen/dIzJK

Answer 2

我删除了一些多余的标记(圆形和方形容器......只需要一个)并设置了img本身:

#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 3

将此代码添加到您的父 div 并解决问题：

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