我发现一个代码可以在您悬停时增加图像的大小，并且悬停的图像不会被其他图像裁剪： 教程共和国.com
但是当我也输入这段代码时：
img { transition: filter .5s ease-in-out; -webkit-filter: grayscale(100%); filter: grayscale(100%); } img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
当您将鼠标悬停时，图像会变大并且不会变灰，但图像会相互叠加。 有没有办法让它在图像不相互叠加的情况下工作。
向图像添加
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; }