Как изменить размер блока при hover, чтобы другие блоки не уезжали?

Question

[s0pran0]

Помогите сделать красоту! ))
Есть карточки товара, при наведении должны появляться характеристики и кнопка добавления в корзину, но при этом не должны уезжать другие блоки.

https://fex.net/ru/s/vtf1apv - вот пример как должно быть

При наведении на этом примере всё стоит на месте и только та карточка на которой hover, увеличивается.

У меня же получается что при наведении на карточку, она увеличивается и сдвигает другие карточки.

https://fex.net/ru/s/3tt8osc - вот пример что у меня сейчас

Помогите разобраться как сделать увеличение карточки, не затронув остальные

Comments

[Sand]

Может код ваш покажете?

[Вадим]

Нужно делать дополнительную обёртку, контент которой будет вне потока и отображать эту обёртку при наведении.
Что-то типа
.card -> .card-body + card-extra

.card-body - основная карточка.
при наведении на .card показывать .card-extra у которого абсолютное позиционирование относительно .card

Answer 1

[Дима Паутов]

https://jsfiddle.net/6yp1vmc2/

или не указывать фикс высоту при ховере, а делать auto. Если контента может быть динамическое кол-во

Comments

[MRcracker]

спасибо большое. нашел бы раньше сэкономил бы кучу времени. не нашел бы, то большая вероятность того, что потратил бы еще кучу времени!

Answer 2

[twolegs]

Контейнер карточки с position: relative, а сам контент нужно поместить в блок с position: absolute.
Абсолютно позиционированные элементы не будут влиять на положение других.

Answer 3

[Антон Вебсайтовский]

Надо глянуть код, надо было сюда залить https://jsfiddle.net или на подобные.
Это просто сделать, выше вон чел написал под ником twolegs.
Надо просто чтобы блок накладывался сверху на другой и все.