我发现一个代码可以在您悬停时增加图像的大小,并且悬停的图像不会被其他图像裁剪: 教程共和国.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粉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>