圖像懸停的文本和不透明度更改CSS

Question

我正在嘗試將圖像懸停在文本上。

下面是懸停風格的圖像在我希望能實現

http://imageshack.us/a/img577/7093/cxzy.png（非懸停）

http://imageshack.us/photo/my-images/585/l9ka.png/（懸停）

我一直在嘗試很多不同的方式，沒有他們似乎在工作！

Answer 1

有幾種方法可以做到這一點，但我通過我的例子中的:after僞元素做到了。

jsFiddle here

HTML

<div> 
    <img src="..."/> 
</div> 

CSS

div { 
    position:relative; 
    display:inline-block; 
} 
div:hover:after { 
    content:"content here.."; 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,.5); 
    border:10px solid red; 
    position:absolute; 
    top:0; 
    left:0; 
    display:inline-block; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    text-align:center; 
    color:white; 
    padding:12px; 
    font-size:20px; 
}