a ( background: url(sprite.png.webp) no-repeat; display: block; height: 30px; width: 250px; ) a:hover ( background-position: 0 -30px; )Установленные высота и ширина обеспечивают отображение только части изображения sprite.png.webp. При наведении курсора изменяется положение фонового изображения, открывая другую область изображения.
См. Pen KBjZwg Джеффа Грэма (@geoffgraham) на CodePen.