Das Transformieren und Filtern von Bildern führt zu einer Überlagerung

Question

Ich habe einen Code gefunden, der die Größe eines Bildes erhöht, wenn man mit der Maus darüber fährt, und das schwebende Bild nicht von anderen Bildern beschnitten wird: TutorialRepublic.com

Aber wenn ich auch diesen Code eingebe:

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

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

Wenn Sie mit der Maus darüber fahren, werden die Bilder größer und werden nicht grau, sondern überlappen sich. Gibt es eine Möglichkeit, dass es funktioniert, ohne dass sich die Bilder überlappen?

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>