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;}
在此先感謝。
會有辦法讓擴展填充不透明? –
圖像的「背景顏色」會顯示在其填充區域中... – CBroe
只需添加以下內容:div.images a img:hover {margin:-15px;填充:20像素; box-shadow:0 0 8px#000000;溢出:隱藏;背景顏色:橙色} –