Customer Inquiries

1001 Mark Boulevard St.

New York, NY, US.


Mon - Sat 8.00 - 18.00


Sales department

+01 2345 6789

Hover Effect Using CSS Sprites

One of the cool things you can do with CSS is create a rollover or hover effect using a single image, in CSS it’s known as a ‘sprite’. A sprite is basically a single image with different colors on it that would represent your desired hover or rollover colors. Using a single image saves on load time since most methods of rollover require multiple images, the original, the hover and potentially an active state.Here is an example sprite image using two horizontal areas 30 pixels high to correspond with our code sample:

spriteThe sprite has two stripes 30 pixels tall which allows us to shift the image up or down precisely that amount to expose which color we want. Here’s the CSS to accomplish it:

a {
       display: block;
       background: url(sprite.jpg) no-repeat;
       height: 30px;
       width: 250px;

a:hover {
       background-position: 0 -30px;



Pin It on Pinterest

Share This