Как реализовать появление дополнительной информации при наведении на карточку товара?

Question

[Александр Вербицкий]

Если зайти на сайт СДЭК, то там, при наведении на товар, появляется доп инфа. Как такое реализовать? Что-то ни где не нашел
СДЭК ссылка

Comments

[Ankhena]

В каком смысле нигде не нашли?

прямо на сайте Сдэка и смотрите

[Александр Вербицкий]

Ankhena, Я понял, как при наведении появляются элементы, но не могу понять, как сделать так, чтобы соседние элементы не съежали

[Ankhena]

Александр Вербицкий, хотела сказать, копируйте себе потихоньку код из примера и разбирайтесь.
Но посмотрела в него. Там флоаты. Так что всё тоже самое, только переделайте на гриды или флексы саму сетку.

Если известно сколько добавляется контента, то можно решить прозрачностью и отрицательным margin
https://jsfiddle.net/Ankhena/exsfkrzn/

В остальных случаях абсолютом.

Answer 1

[Pavel-ww]

Такие элементарные вещи узнаются из консоли разработчика. Выделите блок в консоли, исследуете состояние :hover, пощелкайте его туда обратно что бы понять что происходит в html и css коде.

Answer 2

[Максим]

https://codepen.io/topicstarter/pen/WNONLgd - наглядный пример - скрываем абсолютный блок и по наведению на родительский блок показываем