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

Question

[rasimzes]

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

Изображение

Имеющаяся основа на Code Pen

Comments

[Rustam Bainazarov]

Лучше на JS, чтобы считать нужные размеры блока в момент наведения, чтобы делать грамотный transform scale в зависимости от размера блока (так делают в баннерах рекламы Яндекса, например).

Если прямо только с помощью CSS, то можно так (заранее гигантский scale):


Можете менять отдельно как scaleX, так и scaleY, если у вас более-менее одинаковые размеры общих блоков:


Только на CSS точного и прямо крутого эффекта не достичь.

[rasimzes]

Рустам Байназаров, то, что надо! Благодарю за ответ.

Answer 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;
}

Comments

[rasimzes]

Благодарю за ответ. Однако он не в полне подходит, ведь background иконки - это градиет, и именно градиентом должен заполняться блок .card при наведении. А если в решении поменять, цвет на градиет, то анимация, мягко говоря, выглядит не очень

[Rustam Bainazarov]

rasimzes, делайте transform: scale(10) для круга. Круг должен быть отдельным блоком.