Интерактивная карточка с появлением текста!

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

Как работает:

• position: relative у карточки задаёт локальный контекст для overlay-слоёв;

• overflow: hidden обрезает анимацию строго по форме карточки;

• .info размещается поверх изображения через position: absolute и inset: 0;

• transform: translateY(100%) + transition обеспечивают плавное появление контента.

Приём отлично подходит для карточек товаров, превью статей, галерей и портфолио.

Code Ready | #фишка