Skip to main content
Home / Code Snippets / CSS / Basic Link Rollover as CSS Sprite

Basic Link Rollover as CSS Sprite

a {
  background: url(sprite.png) no-repeat;
  display: block;
  height: 30px;
  width: 250px;
}

a:hover {
  background-position: 0 -30px;
}

The set height and width ensure only a portion of the sprite.png graphic is shown. The rollover shifts the position of the background image, revealing a different area of the graphic.

See the Pen KBjZwg by Geoff Graham (@geoffgraham) on CodePen.

icon-link icon-logo-star icon-search icon-star