Logo hover effect


I want the logo on my site to be brighter when it is hovered over with the mouse. I found a method to do this by using a double-wide image, having two versions of the logo in one image side by side. (Here is the tutorial link if you want to check.)

I have the following CSS right now.

#logo { height:60px; width:240px; display:block; background:url("img/logo.png") }
#logo:hover { background-position:right }

In this method, an image with approximately double size is loading. Since not every visitor would point their mouse over the logo or click it, this will be a partial waste of bandwidth. Do you have an idea to do the hover effect in such a way that the second image will be loaded only when someone hovers over the logo?


What you’ve created is called a “sprite” image, and it’s the best way to go. You could have a separate image appearing on hover, but it doesn’t work as well, because there’s a delay as it downloads. That’s the beauty of sprites, and the extra bandwidth is usually negligible. So I’d recommend you stay with what you have. :slight_smile:

Ralph, thank you once again. I guess I should get rid of the “optimization freak” inside me :slight_smile: I reduced the logo size (the sprite image) to 8kb and that side of me is still thinking that I could make it 4 :slight_smile: But, now I heard this from you, I will leave it as it is.