图像溢出：用比例转换隐藏

Question

我正在尝试实现当您将鼠标悬停在图像上时，它会放大边框的效果。我试图通过在悬停时使用 CSS3 转换来实现这一点，溢出：隐藏在图像上：

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

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

Answer 1

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

有两种解决方案：

图片在background-image

然后你必须使用background-size 来放大你的图像。

您在.portrait 中有一个img 标签

就这样做

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

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

Answer 2

将图片放在父元素中，并在父元素上使用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 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>