html - 在 div 中悬停缩放图像

Question

当用户将鼠标悬停在图片上时，我想放大图片，但图片溢出了容器。我怎样才能隐藏这个容器的溢出？

<div class="shop-item">
    <img src="http://redensart.bplaced.net/img/schild.jpg"/>
    <div class="shop-content">
        <h3>Schilder</h3>
        <p>Kleiner Beispieltext zur Beschreibung des Produktes</p>
        <a href="#" class="button">Bestellen</a>
    </div>
</div>

https://jsfiddle.net/j6fpcykk/

Answer 1

只需将您的图像包装在具有overflow:hidden 的容器中即可。

.shop-item {
  width: 50%;
  flex-basis: 33, 33%;
  margin: 10px;
  border: 1px solid #cdcdcd;
  overflow: hidden;
}
.shop-item .imgContainer {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.shop-item:hover .imgContainer img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
.shop-item .imgContainer img {
  width: 100%;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
.shop-item > .shop-content {
  padding: 10px;
}

<div class="shop-item">
  <div class="imgContainer">
    <img src="http://redensart.bplaced.net/img/schild.jpg" />
  </div>
  <div class="shop-content">
    <h3>Schilder</h3>
    <p>Kleiner Beispieltext zur Beschreibung des Produktes</p>
    <a href="#" class="button">Bestellen</a>
  </div>
</div>

jsFiddle 分支:https://jsfiddle.net/azizn/anzude1x/