頂部的背景圖像（使用CSS）

我有這張圖片，當你在他們身上徘徊時，我想在我的產品圖像上顯示該圖像。頂部的背景圖像（使用CSS）

這是我使用的是什麼：

.centerBoxContentsFeatured img:hover { 
    background-image:url('http://i47.tinypic.com/vz2oj.gif'); 
    }

它的工作，但它暫時落後的產品形象，而不是在它的上面顯示。我嘗試了絕對定位和z-index，但似乎沒有任何工作。

http://www.pazzle.co.uk - 嘗試應用在主頁上的圖像上。 < <

編輯：

#featuredProducts.centerBoxWrapper { 
    position: relative; 
    } 
#featuredProducts.centerBoxWrapper:hover:before { 
    content: ''; 
    width: 187px; 
    height: 179px;; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-image:url('http://i47.tinypic.com/vz2oj.gif'); 
}

來源

2012-10-24 Lewis

a { 
    display: block; 
    position: relative; 
    width: 100px; 
    height: 100px; 
} 
a:hover:before { 
    content: ''; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-image:url('http://i47.tinypic.com/vz2oj.gif'); 
}

Demo

使用僞元素。

來源

2012-10-24 01:03:09 bookcasey

這是比我的更好的答案，僞元素對這類事情真的很有用！ – KaeruCT

謝謝先生，我差不多可以工作了，請在OP中查看我的編輯。無論圖像懸停，圖像只出現在一個位置？ – Lewis

我看了一下你的網站，看起來你應用了風格錯誤的元素。我認爲你應該將它們應用到'.centerBoxContentsFeatured'上。 – KaeruCT