变换和过滤图像导致叠加

Question

我发现一个代码可以在您悬停时增加图像的大小，并且悬停的图像不会被其他图像裁剪： 教程共和国.com

但是当我也输入这段代码时：

img {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

当您将鼠标悬停时，图像会变大并且不会变灰，但图像会相互叠加。 有没有办法让它在图像不相互叠加的情况下工作。

Answer 1

向图像添加 position:relative 并更改悬停时的 z-index ，以便图像与其他图像重叠。这是使用变量的示例：

ul {
   list-style: none;
   display: flex;
   gap: 1rem;
}

img {
    --grayscale: 100%;
    --zindex: 1;
    --scale: 1;
    --radius: 0;

    inline-size: 125px;
    aspect-ratio: 1;

    transition: filter .5s ease-in-out;
    filter: grayscale(var(--grayscale));
    transform: scale(var(--scale));
    box-shadow: 0 0 var(--radius) rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: var(--zindex);
}

a:hover img {
    --grayscale: 0;
    --zindex: 2;
    --scale: 1.5;
    --radius: 10px;
}

<ul>
  <li>
    <a href="#">
      <img src="https://picsum.photos/200/200?v=1" alt="...">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://picsum.photos/200/200?v=2" alt="...">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://picsum.photos/200/200?v=3" alt="...">
    </a>
  </li>
</ul>