Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Rollover Effects Made Easy – with CSS!

CSS & Webdesign Tutorial: Rollover Effect

You might have been thinking about using Adobe Flash (in case you didn’t know, Adobe bought Macromedia) to create a .swf file which allows you to display dazzling rollover effects. That’s perfectly fine, but when it comes to faster loading time, simplified effects and crossbrowser compatibility, rollover effects achieved by simple CSS and (X)HTML code beats it hands down. If you’re ready to go, don’t stop reading!

Take Two

Of course you can stick to just simple text for your links, but what if you adore a more sophisicated, user-friendly and attention-grabbing list of links? There are actually two ways to achieve the rollover effect – one is instructing the browser to load a separate background image when you hover your mouse over the link, the other is simply ask the browser to alter the coordinates of the background image. Maybe this illustration will help clear things up a little:

Rollover Effect - Illustration

Personally I prefer the latter for a few reasons:

  • Reduces the number files the browser needs to load
  • Need not load two images separately (inactive and hover states)
  • Rollover effect works perfectly when you’re disconnected
  • No flickering effect in Internet Explorer

Make your own rollover icons

Since I’m yet to learn how to create icons, I usually use certain icons from other marvellous, free-of-charge icon packages generously shared by their respective designers. I would recommend the following:

Of course you can google for more icons, there are a lot more out there, for free! But of course, please do remember to give credits to the icons’ respective owners – be appreciative and respectful of their ownsership (copyright, anyone?) and effort.

Rollover Effect - RSS IconLet’s say, you want to start off with a RSS icon. Well what you need at hand is a simple image editor, like Gimp or Photoshop (I’m not sure whether Paint does offer so much functionality). Since I’m so bad at Gimp, I guess my only option is Photoshop huh? Right click to save the gigantic version (320*320, it’s HUGE!)

Step 1: As usual, open the image
Rollover Effect - Step 1

Just like what you’ll usually do, drag and drop the image file into Photoshop workspace. If there happens to be any transparent area (don’t forget this especially if you’re working with PNG icons!), create a new fill layer by going to Layer > New Fill Layer, and make the fill colour same as the background colour of the page you’re intending to use your icons.

Step 2: Double the height
Rollover Effect - Step 2

Now what we’ll want to do is to double the height of the canvas. This can be done by going to Image > Canvas Size or by punching in Alt + Ctrl + C. Multiply the original height by 2 (in this case, the original height is 96px so it’ll be 192px) – simple maths, it’s as easy as that. And before you proceed, don’t forget to make sure that the canvas size expands downwards (just click on the arrows, shown in the screenshot above). When you’re done, you should see this:

Rollover Effect - Step 3

Step 3: Duplicate image layer
Rollover Effect - Step 4

Right click on the image layer and select Duplicate Layer, and poof, you’ll get an identical copy of the image. Nudge it towards the blank area of the canvas. Since you’ve doubled the height, the two icons should fit perfectly in the canvas now.

Step 4: Determine the rollover effect
Rollover Effect - Step 5

So now what you really need to do is just to think of what rollover effect you want to achieve. Do you want the icon to get bigger / smaller, or do you want it to become clearer? It all depends on you. For this example, I’ve decided to decrease the opacity of the top icon to 50%, so that it appears faint at first, but when you hover your cursor above it, you’ll see the icon clearly. This effect is identical to that of the top-right navigation bar of this page (this may not be true if I’ve changed themes). Remember to save! :mrgreen:

Pain in the butt coding and styling

Now the problematic part. What should I do to materialise the rollover effect? You can’t possibly plop the image somewhere and expect it to happen by itself. So, we’ll need CSS and XHTML to help us out. This is what we want to do:

  • Create a list of links, you can use either the <ul> or <li> tags
  • Make sure that CSS loads the images into the links
  • Create rollover effect with CSS
  • And you’re done!

(X)HTML coding Now we’ll create a list of links using XHTML coding. It’s actually quite simple!

  1. <ul id="navigation" class="clearfix">
  2. <li><a href="#" title="RSS Feed" id="rssfeed">RSS Feed</a></li>
  3. *You can add more if you wish, but remember to get the id correct!
  4. </ul>

Don’t forget to change the link from “#” to something else! For example, if you’re linking your blog feed, copy and paste the link inside the quotation marks after the href tag.

Tricky CSS
This is the harder part, but don’t worry, I’ll try my best to guide you through.

  1. .clearfix:after {
  2. content: ".";
  3. clear: both;
  4. display: block;
  5. height: 0;
  6. visibility: hidden;
  7. }
  8. /* Hides from IE-mac \*/
  9. * html .clearfix {height: 1%;}
  10. /* End hide from IE-mac */
  11. #navigation {
  12. background: transparent;
  13. margin: 0;
  14. padding: 0;
  15. width: 100%;
  16. }
  17. #navigation li {
  18. float: left;
  19. list-style-type: none;
  20. }
  21. #navigation li a {
  22. display: block;
  23. margin: 0 3px;
  24. padding: 0;
  25. height: 96px;
  26. width: 96px;
  27. text-indent: -9999px;
  28. }
  29. #navigation li a#rssfeed {
  30. background: url(images/rssfeed_bg.jpg) no-repeat top left;
  31. }
  32. #navigation li a#rssfeed:hover {
  33. background-position: bottom left;
  34. }

I shall explain the code bit by bit :razz:

.clearfix:after

  • *This is the holy hack!
  • Of course you can always opt to insert <br style="clear: both" /> at the end of the floated element but it’s messy and unsightly. So this is the clean way to fix it without any additional markup.
  • The code is actually from here, they say it’s a little old, but hey, it works!

#navigation

  • background – I usually set it to transparent by default, but you can always specify the colour or background image you want for the element. To have a background color, use: background: #xxxxxx; where xxxxxx stands for the hexadecimal colour code. For image, use: background: url(imageurl) top left no-repeat;. If you want to repeat the background, you can repeat it horizontalll: repeat-x or vertically: repeat-y.
  • padding and margin – feel free to change the values of these elements to suit your page. Usually I’ll set both to zero, unless other reasons call for it to be changed.
  • width – set to a value in terms of pixels or percentage to your own liking. Since I usually wrap the entire list in a <div> container, I set the width to 100%.

#navigation li

  • floatfloat:left: is used so that the each component of the list will stack up against each other horizontally and not the conventional vertical arrangement.
  • list-style-type – it is set to none because you wouldn’t want to see the ugly little bullets floating around right?

#navigation li a

  • margin – this represents the spaces between each tab.
  • height and width – if you’ve noticed, they are set to the original size of the icon (not the modified canvas size!).
  • text-indent – intentionally set to -9999px, this causes the text between the <a></a> tags to be displaced way beyond any monitor on earth but not removing the text. This is to make sure that text readers can find your RSS feed as well (they don’t read images).

#navigation li a#rssfeed

  • background – I’ve specified the CSS script to load the image rssfeed_bg.jpg from the images folder, relative to the directory where the CSS file has been placed in. The background is not repeated (the no-repeat statement) and the image is positioned at the top left corner (alternatively, you can use top center) so that the upper half of the image is displayed.

#navigation li a#rssfeed:hover

  • *This is the key to the rollover effect :)
  • background-position – it has been altered to bottom left (you can use bottom center as well), so the bottom half of the image is displayed.

See it live!

You can see this styling (not identical but similar) being in use on a rollover effects demo page!

Rollover Effects with CSS (1207) - 4 KB

There are two examples in the page, be sure to check them out! They are actually variations of the original styling and coding I’ve provided. Feel free to experiment with it!

Hope you find this tutorial useful! :razz:

Burn after reading » Now you're done reading. What's next?

Related

Related posts that might interest you:

Popular

Posts that are popular among visitors:

Share it

If you've enjoyed the post, or think that it might be useful to others, do share in on a social network site that you're using. Thank you!

  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • StumbleUpon
  • Technorati
  • LinkedIn
  • Reddit
  • Design Float
  • Identi.ca
  • Live
  • Ping.fm
  • Print this article!
  • Twitter
  • Netvibes
  • HackerNews
  • Slashdot

18 responses to “Rollover Effects Made Easy – with CSS!” » Leave a response

  1. IvyResponse

    Good tutorial. I rarely use image rollovers but maybe I should give it a try sometime. :) As for clear both usually just this code will do. It works from IE 6 onwards and of course in Firefox and Opera. (not sure about safari, and probably doesn’t work on IE 5.5 but who the heck uses IE 5 anyway)

    .clear {
    clear:both;}

    And on your XHTML inserting something like this will do the job.

    Check out Ivy’s last blog post: Craigslist Ad: Beauty Isn’t Worth Money, Honey

    1. IvyResponse

      Dammit.. looks like the [code] doesn't actually work in the comments. I meant for the XHTML to say:

      [div class='clear'] [/div]

      Check out Ivy's last blog post: Craigslist Ad: Beauty Isn’t Worth Money, Honey

    2. IvyResponse

      IE has stopped production for macs a long time ago. There’s no need to cater for them any longer. :P

      I don’t really understand the BR clear tag property since I use margins to control all containers. I only use the clear property between divs so I haven’t run into problems so far. :D

      Check out Ivy’s last blog post: Beauty Isn’t Worth Money, Honey

    3. teddYResponse

      I’ve seen other wordpress themes using the <br /> tags to clear floated containers, and yea of course <div></div> works equally fine.

      I didn’t have any problems with floats, margins and paddings when designing WordPress themes – I get them only then they’re out of WordPress (ie, in HTML files etc). This is weird. When I save my blog as a .HTML file and I open it up in my browsers, the display is totally screwed up! Looks like WordPress team did some tweaking to the coding :razz:

  2. momoResponse

    wow another really useful post.

    i wonder how many comments i’ve made here begun with wow.. -_-’

    Check out momo’s last blog post: Facebook App: Graffiti

  3. MelleResponse

    *praises you*
    I was struggling with rollover effects today and I couldn’t understand why my coding wasn’t working. You know I really just wanted to try something new and possibly take my websites to the “next level” in my book…but nothing was working. I just settled on looking for a good script and just messed around from there. I think I should probably learn how to do it with CSS instead. I have to add, your illustrations are so great. I was looking for a big RSS feed icon. I want to try and make my own using the little ones.

  4. SilverIsleResponse

    Woah. Kudos to you teddY for putting in so much effort in making this tutorial!

    As much as I love knowing about tech stuffs, I’m just too tired to learn it now. Hehe. But I’m sure many out there will find it useful!

    Check out SilverIsle’s last blog post: An evening at Nobbys Beach

  5. IdResponse

    I have used the CSS rollovers before, but it’s always a battle to get it right and there is always a fine line between frustration and wanting to headddesk out of frustration! Haha! But thanks for the tutorial. Seriously, it’s nice that you are doing service to those who will need this technique. I wanted to implement it in my redesign, but I guess I can wait for another bout of inspiration to consider rollovers. =P

    Check out Id’s last blog post: Maundy.

  6. BrandyResponse

    I’m a fan of the roll-over effect. Use it all the time. =) Great tutorial!

    Check out Brandy’s last blog post: Dream Diary – Storm of the Century.

  7. EricResponse

    Thx for putting up this tutorial …!

    This is what I looking for so long …!

    Thx again … Try it later … :mrgreen:

    Check out Eric’s last blog post: Theme modified done

  8. keremResponse

    hello,
    thank you for tutorial. it was very helpful.
    i was able to create rollover icons but i can’t order them vertically.
    any idea?

  9. JerryResponse

    Nice work! I used this on a Drupal site and it worked great. I am thinking of a way I might turn this into a module.

    Thank you.

    (@ kerem — if you add a (paragraph tag) between the individual li links they should stack up vertically.)

  10. Keyword2Response

    Join Its a, – You cannot?This is graphically, text your grounds.Fun and fun, may last up.Behind you is Keyword2, to your party body They could.And sewing can, one sense this.,

Leave a Response » Share your thoughts or Return to top

Your name is required. Why?

  • So that I can address you personally (which I'm more than happy to do).
  • Everyone loves their name to be called, right? Nobody wants to be referred to as 'a certain someone' or Mr X (X-Men members aside).
  • If your post too much spam, your name will be imprinted on a personalised voodoo doll, completely free of charge. I'm just joking!

Your email is needed. Why?

  • Your email is, and will, never be given out to any third party under any conditions (except for people sneaking up behind me when I'm on WP admin).
  • So that I can contact you personally in case of certain issues that I wish to address personally.
  • If you post too much spam, I'll email the same spam you've posted 10 times back to you, completely free of charge.

You can always leave a personal URL behind

  • It can be anything - most people put their blog URL, their facebook page, their Twitter URL, their MySpace or etc.
  • I give love back by saying NO to no-follow. All of your webbie links are dofollows instead.

Twitter. Twitter. Twitter.

  • What is Twitter?: Twitter is a social networking and micro-blogging service that enables its users to send and read other users' updates known as tweets. Tweets are text-based posts of up to 140 bytes in length.
  • What is my Twitter ID?: To get a Twitter ID, you simply have to sign up for an account at Twitter.com. Your ID will be in the format of your profile's URL - http://twitter.com/[userid].

Comment notes

  • Gravatar: You can register for one at Gravatar.com
  • XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">
  • Codes: Wrap them up with <code></code> tags.

Hello Easter Egg hunter! You've discovered the magic of the Konami Code!

Yea. You probably know what the Konami code is before getting to this page. So now what? Here is a randomised YouTube video on my favourites list... which includes Rickroll, if you're luck enough to get it.

You are currently watching Pizza Delivery Fail. Loving it? You can even watch the video in its full screen glory :)

The Konami Code:
Konami Code sequence