Как сделать, чтобы при наведении на блок появлялся фон?

Question

[daneliyan]

Всем привет)
Как сделать анимацию, чтобы при наведении на один из проектов в блоке "Selected Projects" шрифт становился белым, а у фона повлялась картинка?
- Шрифт у меня сделан через переменную $black-color
- Картинка у каждого проекта своя.

Comments

[Ankhena]

Вот сайт, на котором можно посмотреть анимацию, которую я хочу повторить.
https://outside.digital/

Там же, в инструментах разработчика, можно посмотреть как сделано у них.
И это не единственный вариант.

Какие проблемы у вас возникли со сменой цвета не очень понятно.
Картинку можно менять, например, в псевдоэлементе прибитом куда нужно с помощью absolute|fixed. Или менять фон у body (в сочетании с bg attachment)
Можно при наведении на слово менять класс всему блоку на JS. Классу прописывать картинку. Можно менять не класс, а инлайново менять значение кастомного свойства.

[Ankhena]

daneliyan, разбейте задачу на мелкие.

Например, такая логика (можете поменять на свою)
1. Выбрать элементы (на которые hover)
2. Написать цикл, в котором
3. повесить обработчики событий
4. Выбрать элемент, у которого нужно менять фон (или просто найти его по селектору или по родственным связям)
5. Сменить у найденного кастомное свойство.

По дороге придумать, где хранить значение этого кастомного. Например, в data-атрибуте элементов, на которые наведение.

Answer 1

[Владимир Коротенко]

Comments

[Владимир Коротенко]

daneliyan, если честно я не учитель. За конкретные решения я привык получать денежное вознаграждение.
я примерно вас направил, а уж дальше вы сами, ну или за мой прайс