Как сделать, чтобы hover обтекал саму картинку?

Question

[Evgenij_nechujveter]

Как сделать, чтобы hover обтекал саму картинку? Сейчас же на 445 строке он полностью делает картинку белой:

Не видно самых значков, нужно чтобы только задний фон был белым,а не весь квадрат. Значки же становились черными

Ссылка на код

Картинка спрайта:

Comments

[ой всё]

по ссылке вообще никаких картинок нет

[Evgenij_nechujveter]

ой всё, Там нужна только картинка спрайта. ее я прикрепил картинкой

Answer 1

[iBird Rose]

у тебя все работает как нужно. просто ты не видишь этого, потому что иконки у тебя тоже белые. ты ж их черными не делаешь нигде.

Comments

[Evgenij_nechujveter]

не совсем понимаю к чему тут z-index? Мне нужно, чтобы при наведении было вот так


Придется делать спрайт с черными картинками? По другому никак?

[iBird Rose]

Evgenij_nechujveter, ну тк у тебя щас так и есть. просто ты не видишь этого, потому что иконки у тебя тоже белые. ты ж их черными не делаешь нигде.

[Evgenij_nechujveter]

iBird Rose, Вот в чем главный вопрос) Как их сделать черными? Мне в фотошопе делать их черными(сами иконки), потом делать спрайт и т.д.? Или есть более быстрый путь?

[iBird Rose]

Evgenij_nechujveter, можешь в фотошопе.
или можешь использовать к примеру шрифтовые иконки например отсюда fontawesome.io/icons
тогда просто придется написать color: #000;

[Алексей]

Evgenij_nechujveter, экспортируй из макета черные иконки и добавь их в спрайт. При :hover меняй background-position.