Javascript 在html中，如何在不移动周围元素的情况下扩展图像？

在我的html代码中，我有一个表（3乘3），每个单元格都有一个图像。我希望这样，当你将鼠标悬停在任何图像上时，它会动画化，并变得更大，当你将鼠标移离它时，它会动画化回到原来的大小

主要问题是它不会影响其他元素的x，y坐标。就像我尝试增大其大小时一样，表格单元格也会展开并移动其他图像

我想要它，这样其他的一切都能保持原样，图像的扩展就在它们上面

有人知道如何在css3、jquery和javascript中实现这一点吗

注意：图像应从四面均匀展开。

谢谢

HTML:

<img src="example.jpg">

我认为这对您的桌子很合适。

HTML:

<img src="example.jpg">

---

我认为这适用于您的表格。

将绝对值放在首位，将z-index放在某个+ve值上。。下面是一个例子。。 你的小提琴/

---

将绝对位置和z索引指定给某个+ve值。。下面是一个例子。。 你的小提琴/

---

您可以使用CSS使用

transform:scale（2）
您可以使用CSS使用
转换：缩放（2）
你能创建你正在尝试的fiddle吗？你能创建你正在尝试的fiddle吗？这会使图像从右下角展开，它应该从所有侧面均匀展开。换句话说，放大图像中心的xy坐标应与原始图像中心的xy坐标相同。在您的问题中（主要问题是它不会影响其他元素的x、y坐标）。。答案是建议只为这一个..这是使图像从右下角展开，它应该从所有方面均匀展开。换句话说，放大图像中心的xy坐标应与原始图像中心的xy坐标相同。在您的问题中（主要问题是它不会影响其他元素的x、y坐标）。。建议只回答那个问题1.阅读他的要求。他想使调整大小的图像显示在其他图像上。请阅读他的要求。他希望使调整大小的图像显示在其他图像上。
.alignright table tr td img
{
    width:150px;
    height:150px;
}
.alignright table tr td img:hover
{
    width:300px;
    height:300px;
    margin-left:-75px;
    margin-top:-75px;
    position:absolute;
    z-index:2;
}