a ( background: url(sprite.png.webp) no-repeat; display: block; height: 30px; width: 250px; ) a:hover ( background-position: 0 -30px; )A altura e largura definidas garantem que apenas uma parte do gráfico sprite.png.webp seja mostrada. O rollover muda a posição da imagem de fundo, revelando uma área diferente do gráfico.
Veja a Pen KBjZwg de Geoff Graham (@geoffgraham) no CodePen.