Можно ли такое сделать на CSS без использования JS?

Question

[cosonicsq]

Есть вот такая карточка:


Нужно чтобы при наведении мышки на эту карточку снизу в карточке отобразилась дополнительная информация:


Можно ли такое сделать на CSS без использования JS? Если да, то как?

Comments

[Евгений]

Display: none, при hover > display:block

[Froggyweb]

Более того js здесь никак не поможет :)

Answer 1

[Юрий]

Comments

[Юрий]

Это самый простой вариант. Однако, если нужны анимации, придётся вместо display использовать что-то другое. Например, transform + z-index и/или прозрачность.

[Роман Дворянов]

Юрий, можно скрывать с помощью max-height на родителя и раскрывать его с transition

[Юрий]

Роман Дворянов, можно, только в таком случае max-height всё равно придётся указывать более-менее близко к реальной высоте элемента, потому что иначе анимация будет кривой.

[Роман Дворянов]

Юрий, тогда

.card__footer {
  opacity: 0;
  transform-origin: top;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: scaleY(0);
}

и

.card:hover .card__footer {
  opacity: 1;
  transform: scaleY(1);
}

Но в таком случае контейнер не будет ресайзится... хмм...
а вот если контейнер специально фиксировать, а футер накладывать поверх с белым фоном и обводкой.....

Answer 2

[Дима Долготер]

Answer 3

[Арсений Матыцин]

https://developer.mozilla.org/ru/docs/Web/CSS/:hover
Скрытый элемент должен находится внутри узла или находится на том же уровне вложенности после того, к которому применяется псевдокласс (в противом случае поможет только JS).

Появление дополнительной информации выбъет поток, если не показывать его с абсолютным позиционированием, это необходимо учесть.

Принцип работы такой же, как в документации на примере выпадающей навигации.

Comments

[Арсений Матыцин]

hash_buy_yourself
1. Согласен, комбинатор может вывезти.
2. Глянь в пункт 3.8 правил сервиса.