Как показать другую часть картинки по наведение в css?

Question

[rinaz22]

Всем привет! Есть картинка 16 на 32. Хочу сделать так: в обычном режиме показывается первая часть 16 на 16, при наведении показывается остальная часть 16 на 16 например нижняя. Как это сделать средствами CSS.

Answer 1

[Антон]

Загрузить спрайт -> сделать блок 16 на 16 -> повесить спрайт как бэкграунд -> по ховеру смещать background-position

Answer 2

[AngReload]

Ещё один вариант: вложить изображение в блок с размерами 16x16 и overflow:hidden, и при наведении применить картинке margin-top:-16px;

Comments

[rinaz22]

А что на счёт clip

[AngReload]

rinaz22, такой эффект хотите: jsfiddle.net/ph7fdd40/147

[AngReload]

Заметьте, что там родительский блок div с указанными размерами обязателен. Иначе когда срабатывает clip и обрезает обрезает изображение под курсором, то hover пропадёт и начнётся «дрожание».
https://jsfiddle.net/25n4hqvw/ — нужно поводить курсором над изображением, что бы увидеть.

[rinaz22]

AngReload, нет. Если объяснить на примере текста, то при наведении меняется цвет. А я хочу, чтобы при наведении поменялась картинка. Только картинка одна. В первой части(16х16) находиться та картинка, который показывается до наведения, а другая часть показывается на том же месте вместо первой

[rinaz22]

AngReload, а нет, все понял. Спасибо Вам! Просто добавил margin-left: -175px; чтобы другая часть картинки появилась там же

[AngReload]

rinaz22, так? jsfiddle.net/ph7fdd40/156

[AngReload]

rinaz22, я чего сказать то хотел, там clip не нужен.

[rinaz22]

AngReload, да. Как-то проблематично получается с такой картинкой. Может лучше его обрезать на две части и при наведении показать просто другую картинки(ту что обрезал)?
Какой вариант лучше?

[AngReload]

rinaz22, тогда вторая часть картинки начнёт загружатся только при наведении.

Посмотрите, разве не просто:
смещение img в div — jsfiddle.net/ph7fdd40/156
смещение background— jsfiddle.net/ph7fdd40/158

[rinaz22]

AngReload, понял, спасибо! Мне понравилась вариант с background, поэтому его возьму

[AngReload]

rinaz22, этот вариант написал вам Антон , думаю стоит отметить его ответ как решение вопроса.

[rinaz22]

AngReload, хорошо. Он просто написал словами и я чуток не понял, а вы показали код

[AngReload]

rinaz22, если хотите, можете и мой ответ как решение отметить :)

[AngReload]

rinaz22, на счёт примера со смещением фона, если будете ломать голову зачем там строчка overflow: hidden;, то она там случайно осталась.

Answer 3

[Дмитрий Христоев]

https://spritegen.website-performance.org/