Html 如何使图像位置独立于周围的文本

我有这张照片。 当鼠标在上面时，图片会变大5倍，当鼠标离开该区域时，图片会恢复正常。 问题是，当图片变大时，下面的文字会变低，我不希望这种情况发生。 我该怎么做？ 位置：绝对对我来说不好，在这种情况下，我的格式在不同的浏览器或屏幕上看起来很糟糕

如果你们中有人能帮我找到另一种方法，我将不胜感激。

我将使用jQuery：

$("#ImageId").mouseover(function() {
 $("#ImageId").css("z-index", "2");
 $("#ImageId").animate({height:"500px",width:"500px"}, "fast");
});
$("#ImageId").mouseout(function() {
 $("#ImageId").css("z-index", "1");
 $("#ImageId").animate({height:"200px",width:"200px"}, "fast");
});

---

这可能看起来也不错

当图像更大时，试试

位置：绝对值。
利奥走对了方向，但缺少了一些东西。您必须“校正”边距，以便在图像扩展时边距向内“增长”。

您至少需要使用
position:relative来定位图像
so
z-index
得到应用

下面是一个工作示例的链接


编辑/嗯。。。在这种情况下似乎不需要z-index。
我使用的是常规的img src标记，如果有关系的话。你能提供一些示例HTML和CSS吗？是的，Leo，这正是我试图做的，它对我不起作用。