Html 如何使图像在通过悬停放大时保持原位？

所以我正在开发我的第一个网站，我试图制作一个图像库，显示图像的缩略图，并在你将鼠标悬停在上面时将其放大，我通过html本身制作了图像的大小100px*100px，然后我使用了以下css代码：

img:hover {  
    width: 100%;  
    height: 100%;  
}

---

显然，我遗漏了一些东西，因为当图像被放大时，它们会将其他图像移开，这会导致小故障，因为这样你就不再在上面悬停。我试着摆弄z索引，但它不起作用，我试着用隐藏溢出将它们放在跨距中，但我遇到了同样的问题，我该怎么办？

您可以使用绝对定位将悬停的图像从文档流中移除

img:hover{
    width:100%;
    height:100%;    
    position: absolute;
    top:0;
    right:0;
}

确保将容器的位置设置为相对

---

这通常是通过javascript/jquery完成的，它使用一个隐藏的div，其中包含完整大小的图片。当用户将鼠标悬停在较小的图片上时，它将显示较大图片的一部分。当用户将鼠标悬停在上面时，全图不会显示，因为溢出隐藏，并且高度和宽度都是静态的。你必须改进你的问题，否则它很快就会关闭。