如何仅将 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 做到这一点？

Answer 1

只需使用 overflow: hidden 即可 innerAnimation class

.innerAnimation {
  overflow: hidden;
}
.innerAnimation img {
  transition: all 1.5s ease;
}

.innerAnimation:hover img {
  transform: scale(1.5);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
  <div class="item">
    <div class="card border-0 position-relative d-flex flex-row">
      <div class="innerAnimation">
        <img src="https://www.w3schools.com/bootstrap4/cinqueterre.jpg" class="card-img-top" alt="">
      </div>
      <div class="innerAnimation">
        <img src="https://www.w3schools.com/bootstrap4/cinqueterre.jpg" class="card-img-top" alt="">
      </div>
      <div class="innerAnimation">
        <img src="https://www.w3schools.com/bootstrap4/cinqueterre.jpg" class="card-img-top" alt="">
      </div>
    </div>
  </div>
</div>

Answer 2

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

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

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

如何仅将 CSS 转换添加到产品项目以转换图像

How to add CSS transition to a product item only for transforming image

html

css

css-transitions