悬停时放大图像并覆盖其他图像

Question

我有一排图像，当我将鼠标悬停在图像上时，我希望它放大并重叠其他图像。 我这样做的方式是，当我将鼠标移到它上面时，该行都被毁了：

代码：

<div>
    <p>Fotos do anúncio</p>
    {row.images.map((image, key) => (
        <img className="imagesTable" src={image.url} />
    ))}
</div>

样式：

.imagesTable {
  width: 50px !important;
  height: 50px !important;
  margin-right: 10px !important;
  margin-top: 5px !important;

   &:hover {
      width: 200px !important;
      height: 200px !important;
      object-fit: cover;
   }
}

Answer 1

正如其他人所评论的那样，执行此操作的方法是在transform:scale(2)上使用&:hover-根据需要调整数字。这应该避免任何布局偏移，并且比您目前正在设置宽度的动画效果要好。

查看本文：https://pqina.nl/blog/animating-width-and-height-without-the-squish-effect/

Answer 2

我这样做是可行的，

代码：

<div>
    <p>Fotos do anúncio</p>
    <div className="images">
        {row.images.map((image, key) => (
            <div className="image-container">
                <img src={image.url} alt="Imagem anúncio" />
            </div>
        ))}
    </div>
</div>

样式：

.images {
    display: flex;
    overflow: hidden;
    transition: all 1.2s ease;
    margin-top: -15px;
  }
  
  .image-container {
    position: relative;
    display: flex;
  
    img {
      width: 50px;
      height: 50px;
      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
    }
  }
  
  .image-container:not(:nth-child(1)) {
    position: relative;
    margin-left: -15px;
  }
  
  .image-container:hover {
    z-index: 1000;
  
    img {
      width: 170px;
      height: 200px;
      cursor: pointer;
    }
  }