I found a code that increases the size of the image when you hover it, and the hovered image doesn't get cropped by other images: TutorialRepublic.com
But when I also enter this code:
img { transition: filter .5s ease-in-out; -webkit-filter: grayscale(100%); filter: grayscale(100%); } img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
When you hover the mouse, the images will become larger and will not turn gray, but the images will overlap each other. Is there a way to make it work without the images overlapping each other.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Add
position:relativeto the image and change thez-indexon hover so that the image overlaps the other images. Here is an example of using variables: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; }