a ( background: url(sprite.png.webp) no-repeat; display: block; height: 30px; width: 250px; ) a:hover ( background-position: 0 -30px; )De ingestelde hoogte en breedte zorgen ervoor dat slechts een deel van de sprite.png.webp-afbeelding wordt weergegeven. De rollover verschuift de positie van de achtergrondafbeelding, waardoor een ander gebied van de afbeelding zichtbaar wordt.
Zie de Pen KBjZwg door Geoff Graham (@geoffgraham) op CodePen.