Darken image on rollover
11,621
How is this:
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;
}
Comments
-
Davey almost 2 years
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 happy. I got part of the way there but something is going wrong. Here it is live:
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Darken</title> <style type="text/css"> #topnav { float:left; margin:22px 0 0 50px; list-style:none; } .kitchy { background-color:#000000; width:112px; height:203px; } #topnav a:hover{ opacity:.6; } #topnav li { display:inline; } </style> </head> <body> <ul id="topnav"> <li class="kitchy"><a href="#"><img src="img/kitch.jpg" /></a></li> <li><img src="img/deck_small.jpg" /></li> <li><img src="img/door_small.jpg" /></li> <li><img src="img/lumber_small.jpg" /></li> <li><img src="img/tools_small.jpg" /></li> <li><img src="img/paint_small.jpg" /></li> </ul> </body> </html>
-
Davey about 13 yearsYea I had looked that over earlier but it didn't quite get me where I need to be.
-
Davey about 13 yearsNice! This is just what I was looking for. Looks like display inline was causing the trouble. Thanks for the help!