如何讓許多圖像具有相同的懸停圖像

Question

我在表格中有幾張圖片，它們用作鏈接並懸停在播放按鈕上方。

我嘗試了很多不同的技巧，但他們都有問題，工作不正常。我決定在這裏分享我的問題，找到一個標準的解決方案。

這是我迄今所做的：

img{ 
    position: relative; 
} 
img:hover:before { 
    background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center; 
    content:""; 
    width: 100%; 
    min-height: 100px; 
    position: absolute; 
    left: 0; 
} 

我不知道如果我在正確的方向或沒有，但看看演示http://jsfiddle.net/jmXdh/8/，如果它是錯的，那麼請讓我知道任何其他方式。

Answer 1

這裏的東西可能工作，假設你可以添加額外的標記：

http://jsfiddle.net/isherwood/jmXdh/11/

a { 
    display: inline-block; 
    overflow: hidden; 
    position: relative; 
} 
a:hover .play { 
    background:url(http://placehold.it/80x80) no-repeat center center; 
    opacity: 0.8; 
    position: absolute; 
    width: 80px; 
    height: 80px; 
    left: 50%; 
    top: 50%; 
    margin-left: -40px; 
    margin-top: -50px; 
} 

<a href="/"> 
    <div class="play"></div> 
    <img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" /> 
    <br /> 
    <b>Video test</b> 
</a> 

或者與過渡效果：

http://jsfiddle.net/isherwood/jmXdh/12/

.play { 
    opacity: 0; 
    transition: opacity 0.3s; 
} 
a:hover .play { 
    opacity: 0.7; 
} 

Answer 2

不幸的是can't使用::before和::afterpseudo-elements與replaced元素。所有替換元素的內容都超出了CSS的範圍。

從Generated and Replaced Content Module (WD):

替換元素不具備 '::之前' 和 '之後::' 僞元素;替換內容情況下的'內容'屬性將替換元素框的全部內容。