图像溢出：通过缩放转换隐藏

Question

我试图实现当您将鼠标悬停在图像上时，它会放大边框的效果。我试图通过在悬停时为缩放设置 CSS3 过渡来实现这一点，溢出：隐藏在图像上：

.portrait {
width: 20%;
overflow: hidden;
transition: transform 0.5s linear;
}
.portrait:hover {
transform: scale(1.1);
}

但是当图像悬停时，仍然会显示多余的部分。我如何使这项工作？

Answer 1

将图像放在父元素中，并在父元素上使用overflow: hidden。

.portrait {
  overflow: hidden;
  display: inline-block;
}

.portrait img {
  transition: transform 0.5s linear;
}

.portrait:hover img {
  transform: scale(1.1);
}

<div class="portrait">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>