How to darken an image on mouseover?

Question

My problem..

I have a number of images (inside hyperlinks), and I want each to darken on mouseover (i.e. apply a black mask with high opacity or som

Answer 1

Put a black, semitransparent, div on top of it.

Answer 2

Or, similar to erikkallen's idea, make the background of the A tag black, and make the image semitransparent on mouseover. That way you won't have to create additional divs.

• CSS Only Fiddle (will only work in modern browsers)
• JavaScript based Fiddle (will [probably] work in all common browsers)

---

Source for the CSS-based solution:

a.darken {
    display: inline-block;
    background: black;
    padding: 0;
}

a.darken img {
    display: block;

    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;

}

And the image:

<a href="http://google.com" class="darken">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
</a>

Answer 3

How about this...

<style type="text/css">
    div.frame { background-color: #000; }
    img.pic:hover {
      opacity: .6;
      filter:alpha(opacity=60);
    }
</style>

<div class="frame">
    <img class="pic" src="path/to/image" />
</div>

Answer 4

Create black png with lets say 50% transparency. Overlay this on mouseover.

Answer 5

I realise this is a little late but you could add the following to your code. This won't work for transparent pngs though, you'd need a cropping mask for that. Which I'm now going to see about.

outerLink {
    overflow: hidden;
    position: relative;
}

outerLink:hover:after {
    background: #000;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
}

Answer 6

Make the image 100% bright so it is clear. And then on Img hover reduce it to whatever brightness you want.

img {
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}

img:hover {
   -webkit-filter: brightness(70%);
   filter: brightness(70%);
}

<img src="http://dummyimage.com/300x150/ebebeb/000.jpg">

That will do it, Hope that helps