About design and nearby

The Rollover Effect with CSS

Posted: March 15th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , | No Comments »

The image rollover effect is a widespread effect (when one image replaces another as your mouse moves over), you usually see it on many web pages. I prefer to use rollover effect (with CSS) for navigation buttons.

You need only 2 images (“image1.jpg” and “image2.jpg”) and some skills ;) to do the same this way.

Stylesheet:
I create a class “rollover”:

  1. a.rollover {
  2.  background: url('images/image1.jpg');
  3.  display: block;
  4.  width: 36px;
  5.  height: 128px;
  6.  }

And “:hover”. See, the image2 replaces the image1- when you move your mouse over:

  1. a.rollover:hover {
  2.  background: url('images/image2.jpg');
  3.  }

And my HTML-code:

  1. <div>
  2.          <a class="rollover" href="page.html"></a>
  3. </div>

Usually I use rollover effect with preload images.

Live example: click here>>

Share Button

Check Related Posts:


Leave a Reply


  • eight × 1 =

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now