Little things like a split second delay between a normal state and hover state image on buttons can just ruin the entire user experience of a website. It's sad, but that's just how neurotic we are!

Preloading the image is, of course, the solution, and we can do this in a number of ways depending of the circumstances. I'm not going to list them all: I just want to share this little CSS only technique I stumbled upon. This is the case: we have a background image for a button and want to exchange it for another background image on hover state, without the delay, with CSS, and without using sprites (because it can be an animated GIF for example).

#the-button {
  background-image: url('images/img.gif');
}
#the-button:before {
  content: url('images/animated-img.gif');
  width:0;
  height:0;
  visibility:hidden;
}
#the-button:hover {
  background-image: url('images/animated-img.gif');
}

That's it. Hope this is useful to anyone.

Comments

Thanks

Thanks , very useful !

CSS Image Preload

best method I've seen so far, THX!

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.