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

Answer 4

看起来好像你造了太多元素！我创建了fork here

我编辑了一些SASS代码以利用指南针库并更好地利用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容器进行交互。有关使用该库的其他信息，请参考compass！祝你好运！

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

4 个答案: