1. Create an anchor tag:
    <a title="Home" href="index.php">Home</a>
  2. Next, turn it into a block (with the same dimensions as the background image) and position the text offscreen:
    a[title="Home"]{
      display: block;
      width: 20px;
      height: 20px;
      text-indent: -9999px;
      overflow: hidden;
    }
    
  3. Give it a background in css:
    background: url('images/home.png') no-repeat;
  4. Next, give it a different background for when you hover:
    a[title="Home"]:hover{ 
      background: url('images/home-hover.png') no-repeat;
    }
    

    You’ll notice that even though the text is offscreen, the area where it would be is still an active link. However, it swaps the background image everytime you hover. Hence, creating an image rollover with just css. Have fun!

P.S. You could also use a sprite to accomplish this using the x and y coordinates.