悬停放大时如何使图像保持原位？答案

【问题标题】：How to make images remain in place when enlarged by hovering?悬停放大时如何使图像保持原位？
【发布时间】：2015-03-18 00:57:24
【问题描述】：

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

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

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

【问题讨论】：

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

【解决方案1】：

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

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

请务必将容器的位置设置为相对。

【讨论】：