Question

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

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

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

有谁知道如何在css3，jquery，javascript中执行此操作？

注意：图像应从各个方向均匀展开。

由于

Answer 1

将绝对值和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 2

您可以使用transform: scale(2);使用CSS3执行此操作。您还必须使用供应商前缀一段时间。

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

我认为你的桌子可以正常使用。

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

3 个答案: