20

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

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

圆圈应保持相同大小。

只有在 CSS 过渡期间，方形图像才会与圆圈重叠（好像 overflow:hidden 根本不存在）。

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

在Firefox中工作正常。

4

4 回答 4

49

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

position:relative;
z-index:1;

这里的例子：http: //codepen.io/DavidN/pen/dIzJK

于 2014-10-14T10:13:16.820 回答
22

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

于 2013-06-01T23:40:02.247 回答
5

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

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
于 2015-10-07T08:29:35.700 回答
2

看起来好像您为一个元素设计了太多样式！我在这里创建了一个叉子

我编辑了您的一些 SASS 代码以利用 compass 库并更好地利用transition和transform可以在此处看到的属性：

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)); }
}

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

于 2013-06-01T23:54:35.017 回答