html - 悬停放大时如何使图像保持原位？

Question

所以我正在我的第一个网站上工作，我正在尝试制作一个显示图像缩略图并在将鼠标悬停在它们上面时放大它们的图片库，我通过 html 本身将图像的大小设置为 100px*100px然后我使用了这个 css 代码:

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

显然我遗漏了一些东西，因为当图像被放大时，它们会将其他图像内嵌地移开，这会导致故障，因为这样您就不会再将鼠标悬停在它上面了。我尝试摆弄 z-index 但它没有用，我尝试将它们放在 overflow hidden 的范围内，但我遇到了同样的问题，我该怎么办？

Answer 1

您可以使用绝对定位将悬停图像从文档流中取出。

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

一定要将容器的位置设置为相对的。

fiddle here