首页  >  问答  >  正文

变换和过滤图像导致叠加

我发现一个代码可以在您悬停时增加图像的大小,并且悬停的图像不会被其他图像裁剪: 教程共和国.com

但是当我也输入这段代码时:

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

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

当您将鼠标悬停时,图像会变大并且不会变灰,但图像会相互叠加。 有没有办法让它在图像不相互叠加的情况下工作。

P粉276876663P粉276876663421 天前1006

全部回复(1)我来回复

  • P粉649990163

    P粉6499901632023-09-16 15:47:02

    向图像添加 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>

    回复
    0
  • 取消回复