我想在圆圈内有一个正方形的图像。
当用户将鼠标悬停在图像上时，图像应缩放（放大）。
圆应保持相同大小。
仅在CSS过渡期间，方形图像才与圆形重叠（好像overflow：hidden根本不存在）。
这是一个在Chrome和Safari中具有怪异行为的演示：http : //codepen.io/jshawl/full/flbau
在Firefox中正常工作。
我删除了一些多余的标记（圆形和方形容器……只需要一个）并设置了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>
