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

Question

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

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

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

Answer 1

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

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

有两种解决方案：

图片位于background-image

然后您必须使用background-size来扩展您的图像。

img

中有.portrait个标记

就这样做

.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>