html - 图像溢出:隐藏有比例转换

我试图获得一种效果，当您将鼠标悬停在图像上时，它会放大边框。我正在尝试通过在悬停时缩放CSS3来实现此目的，并且在图片上隐藏了溢出：

.portrait {
width: 20%;
overflow: hidden;
transition: transform 0.5s linear;
}
.portrait:hover {
transform: scale(1.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>