Overlaying color over an image

Question

Can I add an overlaying color once someone hover over an image/div in this particular case? Right now I'm showing the image at 80% and once someone hovers over it it displays at 100% to create an effect. The image/background in question is part of a sprite:

<div class="main">
     <a class="thumb" style="background: url(image.png) -150px 0;" href="url"></a>
     <div class="title">
        <a href="url">Text</a>
     </div>
</div>

And the CSS:

.thumb {
    display: block;
    background-repeat:no-repeat;
    height: 75px;
    width: 150px;
    opacity:0.8;
    filter:alpha(opacity=80);
}
a.thumb:hover {
    opacity:1.0;
    filter:alpha(opacity=100);
}

Answer 1

You could use a pseudo class that takes up the height and width of your element and only shows up when the element is hovered.

Use rgba() to give a translucent colour. Adjust the RGB values accordingly.

Note the relative position I have given to .thumb, to ensure the pseudo element is absolutely positioned relative to its parent.

.thumb {
    position:relative;
    display: block;
    background-repeat:no-repeat;
    height: 75px;
    width: 150px;
    opacity:0.8;
    filter:alpha(opacity=80);
    position:relative;
}
a.thumb:hover {
    opacity:1.0;
    filter:alpha(opacity=100);
}
a.thumb:hover:after {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    content:'';
    background:rgba(255, 0, 0, 0.3);
}

<div class="main">
    <a class="thumb" style="background: url(https://i.stack.imgur.com/KmG7H.png) -150px 0;" href="url"></a>
    <div class="title">
        <a href="url">Text</a>
    </div>
</div>

Answer 2

I think there are two ways you can go. The first: Create a div with some backgroud-color which overlays you image. By default this div has zero opacity, on hover it has more.

Or you can consider using blend-modes, describes here.

Answer 3

It can be done multiple ways but you can just wrap it in a with a background-color and set visibility: hidden on the image on :hover

html:

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

css

  div { background: red; display: inline-block; }
   img { display: block; }
  div:hover img { visibility: hidden; }

Answer 4

I am not quite sure what you want, but my guess is this.

div { 
  position: relative; 
  display: block;
  width: 150px;
  height: 75px;
}

div:after {
  content: '';
  position: absolute;
  left: 0;
  width: 150px;
  height: 75px;
  z-index: 1;
  background-color: rgba(255,0,0,.2);
  transition: 1s all;
}
div:hover:after {
  background-color: rgba(255,0,0,0);
}

<div><img src="http://www.burrenbeo.com/sites/default/files/imagecache/short/images/Spring_gentian.jpg" /></div>