Как при наведении изменить цвет и фон этих изображений?

Question

[Александр]

Подскажите, как реализовать такое?

Получается, что рамка должна менять цвет при наведении и фон. При этом внутренняя иконка перекрашивается в белый цвет и внутри иконки также должен менять цвет на цвет фона. Я понятия не имею как такое сделать.

И вообще, подскажите чем реализовывать нормальную смену цвета при наведении. Я делаю обычно иконки конвертирую в шрифт и таким образом меняю цвет, еще знаю можно просто менять изображение при наведении, но таким образом с плавностью не получится, потому что будет видно как передвигается иконка.

Короче буду благодарен если подскажите советами ) кто как меняет цвет иконок при наведении и как реализовать смену фона внутри иконки.

Answer 1

[Ankhena]

На базе вот этого (делала с другой целью): https://jsfiddle.net/Ankhena/tevpLmbn/ делаете 6-ти угольную рамку. Вместо слова "кнопка" ваша шрифтовая иконка.
Ну и при наведении меняете какие хотите цвета.

Но я за SVG.

Comments

[sdgroup14]

Гипотетически можно и img) Но кому оно нужно если svg кастомнее и легче управлять

[Ankhena]

sdgroup14, Там про плавную смену было в вопросе. А не сливать картинки в спрайт это совсем уж..