CODEWITHSUNDEEP
javascriptcss
Lee Englestone
Lee Englestone

Reputation: 4667

How to darken an image on mouseover?

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 something), and then go back to normal on mouseout . But I can't figure out the best way to do it.

I've tried..

I don't want..

To reiterate..

I want in image (inslide a hyperlink) to darken on mouseover and then lose its darkness on mouseout.

Thoughts?

UPDATE :

This is my progress from suggestions. Looks fine in IE8, but not in FF3

<html>
    <body>
        <a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)">
            <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
            style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
            onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
        </a>
    </body>
</html>

Thoughts?

-- Lee

ANSWER

I'm going with this (seems to work in IE8 & FF)

<html>
    <head>
        <style type="text/css">

        .outerLink 
        {
            background-color:black; 
            display:block; 
            opacity:1;
            filter:alpha(opacity=100);
            width:200px;
        }

        img.darkableImage 
        {
            opacity:1;
            filter:alpha(opacity=100);
        }
</style>
    </head>

    <body>
        <a href="http://www.google.com" class="outerLink">
            <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
            class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
            onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
        </a>
    </body>
</html>

Upvotes: 32

Views: 121213

Answers (6)

Sabba Keynejad
Sabba Keynejad

Reputation: 8591

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

Upvotes: 11

fresskoma
fresskoma

Reputation: 25781

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.

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>

Upvotes: 65

Sam Collins
Sam Collins

Reputation: 51

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

Upvotes: 5

Ei Maung
Ei Maung

Reputation: 7153

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>

Upvotes: 3

bitbonk
bitbonk

Reputation: 49619

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

Upvotes: 1

erikkallen
erikkallen

Reputation: 34391

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

Upvotes: 2

Related Questions