Comments on: Seamless Image Rollovers Using CSS We build High Quality, Good Looking Premium WordPress Themes that are Easy to Use and ready for just about anything. Tue, 28 Jun 2016 19:01:53 +0000 hourly 1 By: Stanley Tue, 18 May 2010 18:14:18 +0000 WOW! Nice tutorial! I like it!

By: Milos Milikic Wed, 21 Apr 2010 07:21:48 +0000 No problem 😉 Cheers

By: Leland Tue, 20 Apr 2010 22:01:25 +0000 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.

By: Milos Milikic Tue, 20 Apr 2010 21:35:00 +0000 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!"; ?>
<title><?php if ($thisPage!="") echo "$thisPage ::"; ?></title>
<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>

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

By: Leland Tue, 20 Apr 2010 00:08:50 +0000 Thanks Iwana, glad you liked the tutorial. Appreciate the kind words about my site as well. 😀

By: Leland Tue, 20 Apr 2010 00:08:10 +0000 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.

By: Leland Tue, 20 Apr 2010 00:06:59 +0000 Glad you liked the tut, Anto.

By: Saad Bassi Mon, 19 Apr 2010 21:42:59 +0000 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.

See this image and then see how Martin broken that up on different places in his blog.:}

By: Iwani Khalid Mon, 19 Apr 2010 21:35:33 +0000 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

By: Leland Mon, 19 Apr 2010 21:04:14 +0000 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?