The Best Way to Create Fast & Easy Preloaded Hover Images

Have you ever seen a nice big button with a beautiful graphic, go to click on it, and the second your cursor reaches it, the whole thing disappears with a flash of white before a hover background image shows up?

It’s a common and easy mistake for web designers. But there is a way around it.

CSS Sprites

A sprite is multiple, small, related images (such as a graphic and the one that will appear there on hover) made into one image. One then applies CSS and to only show certain portions of the image.

The result is no flashing as the browser fetches the hover image; it’s already loaded.

But that’s not the only virtue, with multiple images in one file, there are less HTTP requests, causing the whole site to load faster!

This is very easy to implement

Once you have your graphics ready, just head over to CSS Sprites generator. (It can also be done with Photoshop, but this is simpler) Upload your images and click Generate!. Then just download the sprite image and use the CSS it gives you to position it just right.

And you’re done!

Click the link below to check out a demo I put together.

CSS Sprite Demo

Get this delivered to your inbox!

It's quick, free, and painless.

Comments

  1. So, boy, when will you introduce sprites to your navigation?

    Great article. This site is a valuable resource – I’m actually still referring to your previous article, to make border-radius compatible in older versions of FireFox.

Speak Your Mind

*