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

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

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