Transforming and filtering images results in overlay

Question

I found a code that increases the size of the image when you hover it, and the hovered image doesn't get cropped by other images: TutorialRepublic.com

But when I also enter this code:

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

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

When you hover the mouse, the images will become larger and will not turn gray, but the images will overlap each other. Is there a way to make it work without the images overlapping each other.

Answer 1

Add position:relative to the image and change the z-index on hover so that the image overlaps the other images. Here is an example of using 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>