coding4fun coding4fun - 1 year ago 71
CSS Question

Image overlay on hover?

I'm trying to create the classic "black" overlay on hover of an image. For some reason mine is white. Can anyone explain to me what i'm doing wrong? Here is my jsFiddle.

<img class="thumb-img">

.thumb-img:hover {
-ms-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
background-color: #202020;

Answer Source

Your background-color property is never seen, since the image itself occupies the entire space of the element. Wrap it in a <div> (or similar):

.img-fade {
    background-color: #202020;
.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 {
<div class="img-fade">
  <img src="" />  

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download