Image sprites on web pages are separate images within one image file. As the visitor hovers over an element, a new image will appear. Using image sprites rather than separate image files will speed up page loads.

Example of an image sprrite

The image file should have the image for the standard state, when the web page is opened, and a completely separate image for the hover state. The two images should be separated by enough blank white space so that the original image will not be peeking through. The box for the element should only be as large as one of the images.

The image for the sprite is placed using the background-image property and the background-position property and the :hover pseudo-class.

The images should be created so that they have a exact pixel distance from the bottom of one to match the bottom of the other for the best effect.


Example:

div.brightidea {
    width: 90px;
    height: 90px;
    background-image: url(../images/illustrations/lightbulb.jpg);
    background-position: 0 0;
}
div.brightidea:hover {
    background-position: 0 -100px;
}

 
Hover your cursor over the lightbulb and see what happens. The position of the background image shifts with the hover effect.