overflow：使用border-radius和CSS转换隐藏忽略（仅限webkit）

I want to have a square image inside a circle.

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

When the user hovers over the image, the image should scale (zoom in).

当用户将鼠标悬停在图像上时，图像应缩放（放大）。

The circle should remain the same size.

圆圈应保持相同的大小。

Only during the CSS transition, the square image overlaps the circle (as if overflow:hidden weren't there at all).

仅在CSS过渡期间，方形图像与圆形重叠（好像溢出：隐藏不存在）。

Here's a demo with the weird behavior in Chrome and Safari: http://codepen.io/jshawl/full/flbau

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

Working ok in firefox.

在Firefox中工作正常。

4 个解决方案

#1

I removed some superfluous markup (the circle and square containers... only needs one) and styled the img itself:

我删除了一些多余的标记（圆形和方形容器......只需要一个）并为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>

#2

You need to add this code to the parent of your img :

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

position:relative;
z-index:1;

Example here : http://codepen.io/DavidN/pen/dIzJK

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

#3

Add this code to your parent div and solve problem :

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

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

#4

It appears as though you were styling one too many elements! I've created a fork here

看起来好像你是一个太多元素的造型！我在这里创建了一个分支

I edited some of your SASS code to utilize the compass library and make better use of the transition and transform properties which can be seen here:

我编辑了一些SASS代码以利用指南针库并更好地利用转换和转换属性，这可以在这里看到：

body { padding: 3em; }

.circle {
    height: 500px;
    width: 500px;
    border: 1px solid black;
    @include border-radius(500px);
    overflow: hidden;
}

.circle img {
    height: 500px;
    width: 500px;
    @include transition(all 0.3s ease);
    &:hover { @include transform(scale(1.1)); }
}

Hopefully this helps! Just think of the circle element as the parent container which has general information about the space (e.g. 500px wide and 500px tall). The image itself has a rounded border of 500px. This is the element you want to edit! You can scale and transform this element here without interacting with the parent circle container. Reference compass for additional information about using the library! Good luck!

希望这有帮助！只需将circle元素视为父容器，其中包含有关空间的一般信息（例如，500px宽和500px高）。图像本身具有500px的圆形边框。这是您要编辑的元素！您可以在此处缩放和转换此元素，而无需与父圆形容器交互。有关使用该库的其他信息，请参考指南针！祝你好运！

#1