使用CSS（或jQuery）放大图像，而无需移动页面上的其他内容

我有一组动态生成的图像（每张图像附近都有注释）。 我希望显示最大宽度和最大高度为48像素的每个图像，但是当用户将鼠标hover在图像上时，它会增长到最大宽度和最大高度200像素。 但是没有移动页面上的其他内容。 这是生成图像的代码：

$(function(){ $.getJSON("inc/API.php", {command : "getUserComments", userid : getQueryStringValue("userid")}, function(result) { for (var i = 0; i<6; i++){ $("#divUserCommentsContent").append("
"+ result[i].commentDateAndTime+"
 ****
 
Comment for "+result[i].imageHeader+ "
"+result[i].comment+"
"); } }); }); 

我用2 **标记了图像。 这是CSS：

 .userpic, .commentpic { max-height:48px; max-width:48px; border-radius:5px; z-index:1; position:relative; } .commentpic:hover { max-width: 200px; max-height: 200px; position:relative; z-index: 50; } 

它会放大图像，但也会移动图像右侧和图像下方的所有其他内容。

如何使用CSS（最好）或使用jQuery使图像变大，而不用移动其他所有内容？ 谢谢！

Answer 1

您可以尝试将.commentpic的位置设置为绝对值。

你可以在这里看到一个例子： http ： //jsfiddle.net/HkPCp/3/

我想这就是你想要的行为吧？

编辑：我更新了jsFiddle，以便它不会移动其他元素。

这是正确的行为吗？

Answer 2

将每个图像放入具有设定宽度和高度的容器中。 您的容器溢出将是可见的。

流出的任何东西都是可见的，但不会影响内容。

http://jsfiddle.net/ck6MG/

Answer 3

它在这里使用jQuery：

基本上你有一个隐藏的absolute div ，直到你hoverimg ，然后将自己定位到img所在的位置并显示相同的图像，但更大。 图像从中心增加，不会影响结构的其余部分，因为它是absolute 。

如果你愿意，我可以添加动画。

Answer 4

尝试css position:absolute对于你不想移动的元素的position:absolute

将z-index置于您想要显示在顶部的元素的高位

Answer 5

将class =“userpic-container”添加到图像的父div并尝试此CSS：

 .userpic-container { position: relative; height: 48px; width: 48px; } .userpic, .commentpic { border-radius: 5px; position: absolute; height: 48px; width: 48px; z-index: 1; } .commentpic:hover { height: 200px; width: 200px; z-index: 10; } 

Answer 6

https://jsfiddle.net/dafemtg1/

仅供参考，使用transform属性的CSS：

 img{transition:all 0.2s;} img:hover {transform:scale(1.4);transition:all 0.2s;}