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

Question

在我的 html 代码中，我有一个表格（3 x 3），每个单元格都有一个图像。我想要它，以便当您将鼠标悬停在任何图像上时，它会动画并变大，当您将鼠标移离它时，它会动画回原来的大小。

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

我想要它，以便其他所有内容都保持原样，扩展的图像就在它们之上。

有谁知道如何在 css3、jquery、javascript 中做到这一点？

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

谢谢

Answer 1

您可以使用 CSS 使用transform: scale(2);.

Answer 2

将绝对位置和 z-index 赋予某个 +ve 值.. 如下所示.. 你的小提琴.. http://jsfiddle.net/QMtB3/3 /

.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;
}

Answer 3

HTML:

<img src="example.jpg">

CSS:

img{
width: 300px;
height: 300px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
img:hover{
height: 500px;
width: 500px;
}

I think that works fine with your table.