Как правильно сверстать hover-эффект?

Question

[Константин Клубков]

Как такое правильно верстается? Нужно чтобы при hovere была плавная анимация. Я думаю нижнюю часть обернуть и transform: translateY применить. Правильно ли это?

Comments

[Rustam Bainazarov]

Да, правильно. Блок с текстом поднимаете на transform на высоту кнопки + отступов вокруг неё. Кнопка, на absolute и появляется только при наведении.

Answer 1

[Владимир Сартаков]

Можно по разному, тут дело вкуса, например так:

Answer 2

[Антон Неверов]

Ну вы бы показали свою реализацию, а потом уже бы спрашивали: правильно или нет.

Я бы сделал через wrapper, который поднимается вверх через свойство top. transform тоже нормально.