Задать вопрос
@rasimzes
javascript

Как сделать анимацию при наведении на блок?

Уважаемые, подскажите, пожалуйста, как сделать следующую анимацию: при наведении на основной блок .card, оранжевый background иконки должен заполнить весь блок .card. Просьба рекомендовать решения только с использованием css и/или нативным js.
Изображение
5d6cf647c0785238879241.png

Имеющаяся основа на Code Pen
  • Вопрос задан
  • 143 просмотра
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
@i1yas 
.card {
  ...
  overflow: hidden;
  transition: background-color .2s;
  transition-delay: .1s;
}
.card__img {
  ...
  transition: box-shadow .2s;
  box-shadow: 0 0 0 0 #FF8A00;
}
.card:hover .card__img {
  box-shadow: 0 0 0 300px transparent;
}
.card:hover {
  background-color: #FF8A00;
}
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настроить на Asterisk общение с ботом в живом времени
25 апр. 2024, в 09:55
1000 руб./за проект
Доработать дизайн лендинга
25 апр. 2024, в 09:29
2500 руб./за проект
Сделать красивый лендинг в Тильде
25 апр. 2024, в 09:27
4000 руб./за проект
Ещё заказы