动态更改对象的大小而不影响其他元素

Question

我明白标题可能有点令人困惑（我不知道怎么回答这个问题）所以这是我正在研究的例子。

http://beautifulcreationphotography.net/gallery.html

所以我的问题是，无论何时将鼠标悬停在图像上，其他图像都会在图像放大时移动。一种可能的解决方案是使用绝对定位，但是手动将所有图像定位在网格中是非常麻烦的（我希望将其设置为3列宽的网格）。

有哪些其他解决方案可以帮助解决这个问题？我对纯JavaScript解决方案以及使用JS库都持开放态度。

HTML： http://pastebin.com/pfuRppdY

JS： http://pastebin.com/9m7TwNXU

CSS：

#gallery {
    display:inline;
    margin:50px;
    height:300px;
}

#gallery img {
    position:relative;
    width:200px;
    margin:30px;
}

Answer 1

曾经考虑使用javascript框架，比如jQuery？

您可能想查看此网站：http://codecanyon.net/item/image-effects-pack-jquery-powered/full_screen_preview/136861?ref=lvraa&ref=lvraa&clickthrough_id=60503324&redirect_back=true

滚动到缩放效果，您将看到您要查找的内容。

Answer 2

简单。为每个图像提供不同的z-index！这样他们都在不同的平面......

您可以使用JavaScript / DHTML方法执行此操作。如果您在一个数组中对图像进行编号，则可以很容易地遍历图像并为每个图像指定增加的z-index。