ホバー上にオーバーレイ画像がありますか？

Question

イメージのホバー上に古典的な "ブラック"オーバーレイを作成しようとしています。何らかの理由で私のものは白です。誰も私が間違っていることを私に説明することはできますか？ここに私の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; 
} 

Answer 1

画像自体は、要素の全体のスペースを占有しているので、あなたの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>