a ( background: url(sprite.png.webp) no-repeat; display: block; height: 30px; width: 250px; ) a:hover ( background-position: 0 -30px; )
La hauteur et la largeur définies garantissent que seule une partie du graphique sprite.png.webp est affichée. Le survol décale la position de l'image d'arrière-plan, révélant une zone différente du graphique.
Voir le Pen KBjZwg de Geoff Graham (@geoffgraham) sur CodePen.