Как реализовать анимацию на CSS?

Question

[Сергей]

Подскажите как реализовать такую анимацию на CSS. Нужно чтобы при наведении Мыши иконка и текст выравнивались по центру блока и бэкграунд первого растягивался на 100% как на второй картинке. Важное условие нельзя, например скрыть заголовок в первом блоке под иконкой, a при наведении показывать его. нужно чтобы он просто остался на своем месте. Спасибо.

Answer 1

[Wheelie]

При hover делаете высоту блока с фоном равной высоте родительского блока, меняете цвета заголовка и их положение. например через posistion: relative

Answer 2

[ummahusla]

Я ничего не понял, давай живой пример.

Answer 3

[Сергей]

У родителя position: relative
У блоков примерно так, только значения нужные
transition: 3s
position; absolute;
top: 0px;

При ховере top: 50px;

У тебя 3 блока - блок с красной заливой, иконка, текст, к них нужно z-index прописать