Compass fancy-hover - snazzy-looking image replacement hovers with an animated opacity ramp. Now using Compass sprites so you don't have to do the dirty work! See the demo at http://nathos.github.com/fancy-hovers/

fancy-hover-mixin.sass

@mixin fancy-hover($sprite_dir, $off_state, $hover_state, $speed: 0.3s)
  $sprites: sprite-map("#{$sprite_dir}/*.png")
  $width: image-width(sprite_file($sprites, $off_state))
  $height: image-height(sprite_file($sprites, $off_state))
  +hide-text
  width: $width
  height: $height
  background: sprite($sprites, $off_state) no-repeat
  display: block
  position: relative
  span
    width: $width
    height: $height
    background: sprite($sprites, $hover_state) no-repeat
    display: block
    position: absolute
    top: 0
    left: 0
    opacity: 0
    +transition(opacity, $speed, ease-in-out)
    .no-opacity &
      visibility: hidden
  &:hover span
    opacity: 1
    .no-opacity &
      visibility: visible

hover-demo.html

<div class="fancy-hover-links">
  <ul>
    <li id='twitter'>
      Twitter
      <span></span>
      <!-- don't forget this empty span! -->
    </li>
    <li id='facebook'>
      Facebook
      <span></span>
    </li>
    <li id='forrst'>
      Forrst
      <span></span>
    </li>
    <li id='rss'>
      RSS
      <span></span>
    </li>
  </ul>
</div>

hover-demo.sass

// in this example, the "my_sprites" directory contains 8 pngs, 2 for each image

#twitter
  // pass the sprite directory, the off state name, and the hover state name
  // you can optionally pass a fourth argument for the duration of the fade
  @include fancy-hover(my_sprites, twitter_off, twitter_on)

#facebook
  // repeat for each pair of sprites you want to make fancy!
  @include fancy-hover(my_sprites, facebook_off, facebook_on)

#forrst
  @include fancy-hover(my_sprites, forrst_off, forrst_on)

#rss
  @include fancy-hover(my_sprites, rss_off, rss_on)