Have you ever noticed how sometimes when you hover over an image, it goes blank for a second, and then it loads the hover image? When you roll back over though, everything is seamless.
Here’s an example of what I mean using my Underground ladder image (broken into two pieces).
This is because there are two separate images that need to be loaded, and the second one (on hover) takes extra time to load when the hover effect is triggered.
In this post, I’m going to show you how to eliminate that delay using a CSS technique that loads the entire image at once, and displaying a portion of it.
Combine the Image
The first step to getting this to work is combining both halves of the image into one. You can use your image editor of choice to do this, just copy both of the images, double the height, and paste the inactive one above the active one.
The image in the middle should be what you’re going for. Now we move onto the CSS.
The Code
The first step in the CSS is to limit the height of the image to half (basically so only the top ladder shows up).
For purposes of this tutorial, we’ll use a class called .rollover-tut. Since the original ladder image is 153×149, we’ll use this CSS code:
.rollover-tut {
height: 149px;
width: 153px;
display: block;
}Since we’re making a link, we’ll use the following HTML code:
<a class="rollover-tut" href="#"></a>At this point, your link should look like the original ladder image, with no hover effect (yet).
To get the hover effect working, we’ll use a CSS property called background-position on the :hover pseudoclass.
.rollover-tut:hover {
background-position: 0 -149px;
}
With the above CSS code, you’re pretty much moving the background image up 149 pixels (remember, the height of one ladder image, or half of both combined).
An easier way to remember is to use the following hover code instead, which will have the same effect as the above, and you don’t have to remember any numbers (hat tip: Art Webb via the comments):
.rollover-tut:hover {
background-position: bottom left;
}And here’s what you get:
Notice there’s no delay between the hover effect now, since the entire image is loaded at once.
Conclusion
This same technique can be used for pretty much any background image rollover effect. I’m not sure if any of you have checked out my personal blog design lately, but I make extensive use of it on pretty much every link using a background image (and the submit button on my comment form).
Hope you all enjoyed this CSS tip. If you have any ideas for future CSS tip posts, let me know in the comments.
WOW! Nice tutorial! I like it!
I will suggest you to examine the navigation of Apple’s official website navigation. Its an awesome use of CSS sprites. Another very effective use of css sprites can be seen here.
http://www.problogdesign.com/wp-content/themes/pro-blog-design3/images/pbd-png-sprite.png
See this image and then see how Martin broken that up on different places in his blog.:}
There are definitely some more advanced ways of using this technique. The one I did was probably the simplest of the bunch.
I also noticed something similar on CSS Tricks which I found interesting.
http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-6/images/css-tricks.png
Hey Leland,
This is a very very good post for beginners who are still using 2 different images to create image rollovers – very well-written, short and sweet! Beautiful buttons too!
I’ve just started using sprites recently on my clients’ projects (found it rather troublesome last time lol).
I have a huge image which have all the icons, buttons that I needed for the website. Then I used background-position to display each elements. It can get really really tedious though if there are just too many elements but it’s really worth it
Btw, it’s my first time here on your website. I love it so much, a lot of beautiful & subtle details
Thanks Iwana, glad you liked the tutorial. Appreciate the kind words about my site as well. 😀
This technique is called CSS Sprites.
You could add one more state… Example: normal, hover, selected… And then for these three states you just change background position to top left, center left, and bottom left. Note: This method requires a little php code 🙂
Thanks for the clarification, Milos. Maybe I’ll do a follow up post on how to do one with a selected/active state too, while still using one image.
You mean CSS code (and not PHP) right?
I mean CSS and a little bit of PHP. In this case we need that php to declare when link is in selected state. Here is example in short for web site with two pages (Page1 and Page2):
Page1 code:
<?php $thisPage="Welcome to Page1!"; ?><head>
<title><?php if ($thisPage!="") echo "$thisPage ::"; ?> mysite.com</title>
...
</head>
<body>
<ul id="menu">
<li><a class="page1" <?php if ($thisPage=="Welcome to Page1!") echo "id="selected""; ?> href="page1.php">Page1</a></li>
<li><a class="page2" <?php if ($thisPage=="Welcome to Page2!") echo "id="selected""; ?> href="page2.php">Page2</a></li>
</ul>
...content...
</body>
For page2 just $thisPage variable set to “Welcome to Page2!”
CSS for links:
#menu a {background-position: left top;
}
#menu a:hover {
background-position: left center;
}
#menu a#selected, #menu a#selected:hover{
background-position: left bottom;
}
That’s it 🙂 Cheers
Awesome, I know in WordPress it sometimes spits out default classes for active page items if you use their functions.
Like .current-page-item (for active pages) or .current-cat for active category archive.
Thanks for the tips.
No problem 😉 Cheers
I love using one image for the normal and hover states. The only change I would make is for the background position of the hover state. Change it to:
.rollover-tut:hover {
background-position: bottom left;
}
That way if you change the size of the image, you don’t have to adjust the size.
Ah…wow, I never thought of that but it makes perfect sense. Thanks for the tip.
But if you changed the size of the image, wouldn’t you have to change the height and width in the first declaration?
It still helps as it’s just one less thing to change.
Nice and simple. Maybe this will stop people from using 2 images for rollovers.. well to single images =). Nice tut man, will come in handy for some people in the future =)
Glad you liked the tut, Anto.