Mengubah dan menapis imej menghasilkan tindanan

Question

Saya menjumpai kod yang meningkatkan saiz imej apabila anda menudingnya dan imej yang dilegar tidak dipangkas oleh imej lain: TutorialRepublic.com

Tetapi apabila saya juga menaip kod ini:

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

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

Apabila anda menuding tetikus, imej akan menjadi lebih besar dan tidak akan menjadi kelabu, tetapi ia akan bertindih antara satu sama lain. Adakah terdapat cara untuk menjadikannya berfungsi tanpa imej bertindih antara satu sama lain.

Answer 1

Tambah position:relative 并更改悬停时的 z-index pada imej supaya imej itu bertindih dengan imej lain. Berikut ialah contoh penggunaan pembolehubah:

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>