仅使用CSS在其他元素上展开图像填充

Question

我有一个图像库。当您将鼠标悬停在图像上时，填充会展开并产生阴影效果。

是否可以将填充扩展到其他图像？所以填充的变化不会扭曲页面上的任何其他东西吗？

以下是我的代码 - http://jsfiddle.net/U6VNx/ -

CSS

div.gallery {margin:0 auto; width:900px;}

div.images {text-align:center; width:900px;}

div.images a {width:259px; height:254px; }

div.images a img {padding:5px; transition:padding .5s, box-shadow .5s;}

div.images a img:hover {padding:20px; box-shadow:0 0 8px #000000; overflow:hidden;}

提前致谢。

Answer 1

对于您的简单示例，您可以使用margin:-15px作为悬停图像，并将其转换为：

div.images a img {padding:5px; transition:margin .5s, padding .5s, box-shadow .5s;}
div.images a img:hover {margin:-15px; padding:20px;}

http://jsfiddle.net/U6VNx/2/