html - 如何将 CSS 过渡添加到仅用于转换图像的产品项目

Question

我有一张这样的产品卡：

<div class="item">
   <div class="card border-0 position-relative">
      <div class="innerAnimation">
          <img src="/storage/item1.png" class="card-img-top" alt="">  
      </div>
      ...
   </div>
</div>

现在我想在将鼠标悬停在这张卡片的图像上时添加一些卡片图像放大。

所以我添加了这个：

.innerAnimation img{
    transition: all 1.5s ease;
}
.innerAnimation:hover img{
    transform:scale(1.5);
}

但现在的问题是，图像移出它的框，而放大效果应该影响框内的图像。

这是悬停在图像上的放大效果的结果：

这是预期的结果示例：

没有效果：

放大效果适用：

那么如何用 CSS 做到这一点呢？

标签： htmlcsscss-transitions

Answer 1

确保您的 innerAnimation div 的大小与您的图像大小相匹配，并且应用溢出隐藏

.innerAnimation{
  width: max-content;
  overflow: hidden;
}

这是一个带有边框的 jsFiddle，以帮助说明https://jsfiddle.net/yhqja5Lw/