我發(fā)現(xiàn)一個(gè)代碼可以在您懸停時(shí)增加圖像的大小，并且懸停的圖像不會(huì)被其他圖像裁剪： 教程共和國.com
但是當(dāng)我也輸入這段代碼時(shí)：
img {
transition: filter .5s ease-in-out;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
img:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
當(dāng)您將鼠標(biāo)懸停時(shí)，圖像會(huì)變大并且不會(huì)變灰，但圖像會(huì)相互疊加。 有沒有辦法讓它在圖像不相互疊加的情況下工作。
1
0
0
向圖像添加 position:relative 并更改懸停時(shí)的 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>
