Как сделать выезжающее дополнительное описание к фотографии?

Question

[Дмитрий]

Как на скрине.
Я как понял нужно использовать функцию transition, но что-то сообразить не могу как реализовать

Answer 1

[tyzberd]

https://codepen.io/tyzberd/pen/bZPEJK

Comments

[Дмитрий]

Благодарю!

Answer 2

[Валентин]

при hover делаем animation либо opacity 0 -> 1, либо height 0 -> 100px, либо transform translateX

Comments

[Дмитрий]

Я текст написал параграфом в figure, сделал его блочным и он мне все остальное сломал

[Валентин]

Дмитрий, ну поставь inline-block или position: absolute, а figure position: relative