This isn't related to BP, but I'm having a CSS issue at the moment and I was hoping someone might be able to help me.
I've got images that I want to change when I hover over them. So I took an image that is basically two copies of that image. On top it is desaturized/greyed-out. On the bottom it looks normal. I'm trying to use CSS to show the top half of the image normally, and then on hover, shift down a number of pixels and show the bottom. Here is an example image:
http://nighthawksnation.org/images/conagrafooter.png
Here is the CSS:
#footer_container{padding-top:20px;margin:0;width:100%;list-style:none;}<br />
#footer_container li{float:left;padding:0 14px;}<br />
#footer_container li a{float:left;text-indent:-9999px;overflow:hidden;height:31px;}<br />
#footer_container li a:hover{background-position:0 -31px;}And this is what I have on the page.
<div id="footer_container"><ul><li id="sponsor-6017"><a href="http://www.fanhouse.com" target="_new" style="width: 100px; background: url("http://nighthawksnation.org/images/footer_1_1.png") no-repeat scroll 0% 0% transparent;">fanhouse</a></li>
Any idea what I'm doing wrong, because this has been driving me nuts!
