Как заменить через hover img на другой img не используя скрипт и бэкраунд?

Question

[Masterof]

Делю иконки соц сетей и хочу чёрные иконки менялись на красные ну и собственно вопрос как через ховер применить к 1 img вторую

Comments

[Ankhena]

1. Иконки соц.сетей не являются контентными (смысловыми) изображениями. Это украшения ссылок. И их делают фонами или псевдоэлементами.
2. Если дизайнер не дал их в SVG, то они легко гуглятся и цвет меняется стилями.
3. Если прям никак, то менять однотонные картинки с помощью 2х картинок это дичь, при наличии CSS фильтров. (Пользователи ИЕ вполне обойдутся без такого прекрасного эффекта)
4. И совсем плохой вариант, просто накладывается картинки одну на другую, при ховере верхнюю скрываете.

Answer 1

[Тарас Шульга]

Тут несколько вариантов.
1. Если это img баловался фильтрами
2. Как ещё делали делаем группировку красной и обычной иконки и меняет позицию внутри картинки.
3. Не страдаем хернёй делаем svg анимирует fill
4. Используем шрифтовые иконки и меняем color.

Comments

[Dima Polos]

Сразу вариант 3!)

[lamer350]

Dima Polos, ну тут важно сказать что svg необходимо внедрять в html чтобы работали стили, чтобы было красиво учить спрайты svg, потому лучше вообще ховер эффекты и иконки не делать) Просто написать ищите нас в соцсетях и все хD

[Dima Polos]

lamer350, естественно, что в разметку)

[Masterof]

Пробовал, svg брал фотошопный но че то не вышло у меня применить свво fill

[Тарас Шульга]

Masterof, что значить брал svg фотошопный?)

Answer 2

[wisgest]

<style>
.container:hover .passive, .container:not(:hover) .active {display: none;}
</style>

<span class=container>
<img class=passive>
<img class=active>
</span>

Comments

[Masterof]

Спасибо, помогло на 100%