图像溢出:通过缩放过渡隐藏

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>

Answer 2

问题是你缩放了整个.portrait，而不仅仅是图像。

有两种解决方案：

图像为background-image

然后，您必须使用background-size来放大图像。

您在.portrait中有一个img标签

就这样做

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

这是一支小笔，使用第二种解决方案：https://codepen.io/math2001/pen/zZXBbj?editors=1100

Answer 3

我想提出一个更现代的scss/css解决方案！

/* SCSS Code */

/*
.scale-mask {
    overflow: hidden;
    border-radius: $borderRadius;
    > img {
        transition: 0.4s;
        transform: scale(1.3);
        &:hover {
            transform: scale(1);
        }
    }
}
*/

/* CSS Code */
.scale-mask {
  overflow: hidden;
  border-radius: 5px;
  max-width: 400px;
  /* Size */
  max-height: 400px;
  /* Size */
  margin: 0 auto;
  /* Centered horizontally */
}
.scale-mask>img {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
.scale-mask>img:hover {
  -webkit-transform: scale(1);
  transform: scale(1);
}

<div class="scale-mask">
  <img src="https://source.unsplash.com/400x400/?city" alt="" />
</div>