Basculement de lien de base en tant que sprite CSS - Astuces CSS

Anonim
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.