About design and nearby

The Image Rollover Effect (Using CSS) – Just Another Way

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

The image rollover effect is an effect when one image replaces another as your mouse moves over, I’ve wrote about it before. This example is just a special case. There are no any images, you can find the image when hover your mouse on the link (button).

Here is the HTML used to create this rollover. It’s much shorter and easier to remember than a JavaScript rollover:

  1. <div  id="menu">
  2.    <ul>
  3.      <li><a class="home" href="#">Home<div>&пbsp;</div></a></li>
  4.    </ul>
  5. </div>

And the Stylesheet:

  1. #menu ul li div {
  2. display: none; /* there is no image at the beginning, it's hiding for browsers */
  3. position:absolute;  
  4. }
  5. #menu ul li .home div {    
  6. width: 28px;    
  7. height: 28px;    
  8. background: url(images/home.gif) no-repeat; /* my image */
  9. margin-left:5px; /* moving right */
  10. margin-top:-35px; /* moving top */
  11. }
  12. #menu ul li a:hover div{ display: block;} /* means that the element is displayed as a block – to show the link as an image (you have to define height and width) */

This will create one rollover image per a link (button).

Live example: check the example >>

Share Button

Check Related Posts:


Leave a Reply


  • 8 − = one

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

Let's discuss your project now