How To Make Fast Hover Effects

Causality in Web sites is a must these days. People want action, plain and simple. Not only does it add greater functionality for the user, it gives you a whole other dimension for design.

When I visit a site with static buttons and unchanging link styles I get confused (something I’m quite proficient at actually). I’ve grown so accustom to being shown visually that “this is a place I can do something”, it throws me when it’s not there.

So, to make sure your site is up to snuff, here’s a simple guide on how to add a bit of cause and effect to your link graphics.

The Setup

Unless its a simple colour or style change for text links, generally what is required is two images being switched when the mouse “hovers” over the link. Before CSS, this was done with mouseover events in image tags. Thankfully CSS makes this (and Net life in general) MUCH cooler, but even with CSS there are good ways to do things and better ways.

First, we need some graphics. Let’s use the button we created in the how to make simple glass-like buttons in Photoshop tutorial from a couple weeks back. Opening this image in Photoshop, I make a quick saturation colour change and I get my hover effect.

A common method of image switching uses the :hover pseudo-class and the background-image property, which requires two separate images. The first (or “off”) image is set as the a:link background-image, while the second (“on” or “hover”) image is set as the a:hover background-image. As so:

a:link {
    display:block;
    width:250px; height: 100px;
    background-image: url(imagefile-off.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    }

a:hover {
    background-image: url(imagefile-on.png);
    }
in action

As you can see, this works reasonably well. Particularly because in this example your browsers already loaded the images into the cache (as they were displayed above).

However, a real buzzkill is when you go put your mouse over an image and you have to wait a few seconds for the new (“on”) image to load.

What is needed is a way to load both graphics when the page initially loads, so when the user eventually “hovers” on the image, the “on” graphic is primed and ready to go.

The 2 For 1 Solution

To get around this load-time lag, the solution is to combine both the “off” and “on” images into one graphic file. Simply make a new image with the same width but twice the height of your original and place the “off” image in the top half and your “on” image in the bottom half.

Now when the graphic loads, it is loading both pictures together. Generally, this will also cut down overall filesize (due to colour sharing, the 2-in-1 image is likely to be smaller than the combined total of the previous “on” and “off” images).

Now, to get the hover effect, we again use the :hover pseudo-class. This time, however, we don’t switch out the images, we simply change its position:

a:link {
    display:block;
    width:250px; height: 100px;
    background-image: url(imagefile-off.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    }

a:hover {
    background-position: 0 -100px;
    }

The first bit of code is the same as or first example, the second resets the image’s position as “0” for the left positioning, and “-100” for the top positioning – effectively raising the image so the bottom half of our image is displayed.

in action

As you can see, the result is the same, but this time no lag. To test this, clear your browser’s cache (under Tools or Options) and view the following page:

Hover Image Example (HTML page)

Alternative

If for some odd reason you don’t like this method, another option is to simply set the hover (“on”) image as the background of a CSS element that doesn’t currently have (nor require) a background image and set the element’s background-position to some outlandish position that wont ever be displayed on your page (background-position: 1000px 1000px; works well).

Though it is not in a viewable area, it is still loaded into cache when the page is, and will cause no lag on the troublesome first hover over. However, for me it’s just a bit hackish, and I hate hacks.

Notes

In the examples above, I use the CSS long-hand to explain things, but you can just as easily do this with the shorthand background property.

For additional examples, just take a look around this site – specifically, the top menu tabs use this method.

Good luck and let me know any variations or troubles you have in the comments below.

10 thoughts on How To Make Fast Hover Effects

  1. Just moving a single image upon hover is not one technique I’ve heard of before. I may have to try it out.

  2. Quite nice. I’d seen this used on a menu background once, but never worked out why, now I understand.

  3. Great stuff Ryan….

    Hey, is the Guide site your biz or a design? I am doing something similar here in GZ…Let’s talk soon…

    L

  4. Did a variation of this on a website that is being constructed for work… works great in Firefox, but doesn’t display correctly in IE. Are there any hacks available or help that I could get? The effect looks REALLY good and I would like to be able to use it in both browsers.

  5. Hey Lori, I’ve used it extensively with IE 6 and above and not had a problem (I generally don’t support less than IE 6 – there’s no reason, in my opinion, for anyone to be using that junk).

    Are the problems you’re having for a version below that? And exactly what is the issue?

  6. For a shamelessly quick’n’dirty solution, in your WYSIWYG editor, just reduce the second version of the image to a tiny dot at the bottom of the page that nobody will notice. In spite of being reduced to a dot, the image loads with everything else in the page, and appears instantly when the mouse hovers on the first version. Purists may go “Yuk”, but you can see from the homepage of my rubbish site that the dot isn’t intrusive: eltgames.com.

  7. Hey Jon, cool tip. Another handy one, if you’re not looking to combined the images (for whatever reason), is to assign the image as the background of some random element (DIV, or whatever) that doesn’t require a background image – and then position it way off screen. Then have it load as a hoverover the same as you normally would, but it’s already loaded and cached, so it loads quickly.

  8. Hey, I tried this as opposed to using two separate images, but for some reason, both versions (on and off) show when I load my page. Any idea what I am doing wrong?

  9. Hey thnx man i appreciate that you have took the time to learn us this effect.
    Now i know how to do , couse when i maked them they were slow , couse i had no display:block 😉

    Thnx again

    Greetz Brian.

Say something...

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Return to Top ▲Return to Top ▲