La transformation et le filtrage des images entraînent une superposition

Question

J'ai trouvé un code qui augmente la taille d'une image lorsque vous la survolez, et l'image survolée n'est pas recadrée par d'autres images : TutorialRepublic.com

Mais quand je tape aussi ce code :

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

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

Lorsque vous passez la souris, les images deviendront plus grandes et ne deviendront pas grises, mais elles se chevaucheront. Existe-t-il un moyen de le faire fonctionner sans que les images ne se chevauchent.

Answer 1

Ajoutez position:relative 并更改悬停时的 z-index à une image afin que l'image chevauche d'autres images. Voici un exemple d'utilisation de variables :

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>