2013-10-22 89 views
1

我有一個圖像庫。當您將鼠標懸停在圖像上時,填充會擴大並且會產生陰影效果。使用唯一的CSS擴展圖像填充其他元素

是否可以將填充擴展到其他圖像上?所以填充的變化不會扭曲頁面上的其他任何東西?

這裏是我的代碼 - 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;} 

在此先感謝。

回答

2

爲您簡單的例子,你可以只使用了懸停圖像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/

+0

會有辦法讓擴展填充不透明? –

+0

圖像的「背景顏色」會顯示在其填充區域中... – CBroe

+0

只需添加以下內容:div.images a img:hover {margin:-15px;填充:20像素; box-shadow:0 0 8px#000000;溢出:隱藏;背景顏色:橙色} –