html - 仅使用 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

对于您的简单示例，您可以只将 amargin:-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/