變換和過濾影像導致疊加

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>