我想要一个圆形的正方形图像。
当用户将图像悬停在图像上时，图像应该缩放(放大)。
圆圈应该保持相同的大小。
只有在CSS转换期间，正方形图像与圆圈重叠(就好像溢出：隐藏的不在那里)。
以下是Chrome和Safari中的奇怪行为演示：
http://codepen.io/jshawl/full/flbau
在firefox工作正常
解决方法
看到这个小提琴：
http://jsfiddle.net/jHsAF/
我删除了一些多余的标记(圆和方形容器只需要一个)，并设计了img本身：
<div id=wrapper"> <img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA1LzA4L2JlL2JhYmllc193aXRoLjA5NGNjLnBuZwpwCXRodW1iCTg1MHg1OTA-CmUJanBn/8f195417/e44/babies_with_swagg.jpg" id="test"></img>
#wrapper{
width: 500px;
height: 500px;
}
#test{
border-radius: 500px;
transition: all 2s linear;
}
#test:hover{
-webkit-transform: scale(1.2);
}
编辑：见下面的小提琴：
http://jsfiddle.net/jHsAF/4/
需要添加以下代码：
-webkit-mask-image: -webkit-radial-gradient(circle,white,black);
到父级。
信用：@Pigmess
Webkit not respecting overflow:hidden with border radius
