@rasimzes

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

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

Имеющаяся основа на Code Pen
  • Вопрос задан
  • 103 просмотра
Пригласить эксперта
Ответы на вопрос 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;
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
21 окт. 2019, в 22:35
500 руб./за проект
21 окт. 2019, в 21:56
10000 руб./за проект
21 окт. 2019, в 21:06
600 руб./в час