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

How to expand images without moving surrounding elements in html?

本文关键字：元素 情况下 扩展 图像 周围 移动 html      更新时间：2023-09-26

在我的html代码中，我有一个表格（3×3），每个单元格都有一个图像。我希望它使当您将鼠标悬停在任何图像上时，它会动画化并变大，当您将鼠标移开时，它会动画化回其原始大小。

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

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

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

注意：图像应从各个侧面均匀扩展。

谢谢

您可以使用 transform: scale(2); 使用 CSS 来做到这一点。

给绝对位置，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;
}

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

我认为这适用于您的桌子。

相关文章：