Inspired by Pure CSS Shapes: Triangles, Delicious Logo, and Hearts and with Free Comic Book Day coming up I created a Green Lantern logo using CSS, HTML and no images. Only works in Fire Fox. I created a new version, now works in FF, Opera and Webkit.

V1 Demo

V2 Demo

Detail article regarding this at the-art-of-web.com

1. Merge the two images as one.
   
   
   you will notice the image is 60 pixels in height I have placed the guide at 30 pixels and place the rollover text on the guide.
2. The markup is simple:

   <a class="rollover" href="link/" title="Rollover Link">Rollover</a>

   Break down of the code:

   <a » the a tag
   class="rollover" » CSS identifier
   href="link/" » file location
   title="Rollover Link" » title tag this good for SEO
   >Rollover » Link text
   </a> » Closing tag

3. The CSS is simple as well:

   a.rollover {
   background:url(rollover.gif) no-repeat;
   background-position:top left;
   display:block;
   height:30px;
   width:160px;
   text-indent:-999px;
   overflow:hidden;
   }
   a:hover.rollover {
   background-position:bottom left;
   }

   Break down of the code:

   a.rollover {
   background:url(rollover.gif) no-repeat;   /* places the image in the background of the link */
   background-position:top left;   /* background position */
   display:block;  /* this changes the default render style from inline to block creating a "box" */
   height:30px;  /* sets the height of box */
   width:160px;  /* set the width of box */
   text-indent:-999px;  /* pushes the text out of the box */
   overflow:hidden;  /* this hides the text and lower part of the image that is outside the defined box */
   }
   a:hover.rollover {
   background-position:bottom left;  /* slides the image up creating the rollover effect. */
   }

4. In action: Rollover