coding4fun coding4fun - 1 day ago 5
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 {
opacity:0.5;
-ms-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
background-color: #202020;
}

Answer

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;
    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>

Comments