2016-11-30 256 views
0

我試圖在圖像懸停上創建經典的「黑色」覆蓋圖。由於某種原因,我的是白色的。任何人都可以向我解釋我做錯了什麼?這是我的jsFiddle懸停時圖像覆蓋?

<img class="thumb-img"> 

.thumb-img:hover { 
    opacity:0.5; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    -webkit-transition: all 1s; 
    transition: all 1s; 
    background-color: #202020; 
} 
+0

您的代碼表示,「當我將鼠標懸停在該圖像上,使50%的不透明度/透明度」,這是在白色背景上的過程中它有一個白色覆蓋的印象。 –

回答

4

您的background-color屬性從來沒有見過,因爲圖像本身佔據了元素的整個空間。它包裝在一個<div>(或類似):

.img-fade { 
 
    background-color: #202020; 
 
    float:left; 
 
} 
 
.img-fade img { 
 
    display: block; 
 
    
 
    -webkit-transition: opacity 1s linear; 
 
     -moz-transition: opacity 1s linear; 
 
     -ms-transition: opacity 1s linear; 
 
      -o-transition: opacity 1s linear; 
 
      transition: opacity 1s linear; 
 
} 
 

 
.img-fade img:hover { 
 
    opacity:0.5; 
 
}
<div class="img-fade"> 
 
    <img src="http://placehold.it/200x200" /> 
 
</div>

+0

好的呼籲,這有「覆蓋」是背景呢?我一直是一個duncecap,並添加一個絕對定位的覆蓋,並使用jQuery來添加懸停狀態。但在那種情況下,它被要求是因爲疊加層上的內容需要100%不透明。 –

+0

@Benm謝謝我的幫助。完美工作。 – coding4fun

+0

@ coding4fun沒問題! – BenM