Darken Image On Rollover

I have a list of images that need to darken on rollover. I would REALLY love to do this without a bloated css rollover technique as anytime spent out of photoshop makes me very hap

Solution 1:

How is this:

JSFiddle

What I changed:

<ul> and <li> to <div>. Added kitchy class to all menu items,

Changed this CSS:

#topnav {
    float:left;
    margin:22px 0 0 50px;
    list-style:none;
}
.kitchy {
    background: #000;
    width:112px;
    height:103px;
    float:left;
    margin:5px; /*Optional*/
}

#topnav  a:hover{
    opacity:.5;
}

Solution 2:

This might be what you're looking for : How to darken an image on mouseover?

Solution 3:

Dont set the width, height, for the li, and don't set it to inline, instead use float: left.

See: http://jsfiddle.net/x9M2N/1/