Как сделать, чтобы при наведении на блок появлялся фон?
Всем привет)
Как сделать анимацию, чтобы при наведении на один из проектов в блоке "Selected Projects" шрифт становился белым, а у фона повлялась картинка?
- Шрифт у меня сделан через переменную $black-color
- Картинка у каждого проекта своя.
Вот сайт, на котором можно посмотреть анимацию, которую я хочу повторить. https://outside.digital/
Там же, в инструментах разработчика, можно посмотреть как сделано у них.
И это не единственный вариант.
Какие проблемы у вас возникли со сменой цвета не очень понятно.
Картинку можно менять, например, в псевдоэлементе прибитом куда нужно с помощью absolute|fixed. Или менять фон у body (в сочетании с bg attachment)
Можно при наведении на слово менять класс всему блоку на JS. Классу прописывать картинку. Можно менять не класс, а инлайново менять значение кастомного свойства.
Например, такая логика (можете поменять на свою)
1. Выбрать элементы (на которые hover)
2. Написать цикл, в котором
3. повесить обработчики событий
4. Выбрать элемент, у которого нужно менять фон (или просто найти его по селектору или по родственным связям)
5. Сменить у найденного кастомное свойство.
По дороге придумать, где хранить значение этого кастомного. Например, в data-атрибуте элементов, на которые наведение.
daneliyan, если честно я не учитель. За конкретные решения я привык получать денежное вознаграждение.
я примерно вас направил, а уж дальше вы сами, ну или за мой прайс
