Как изменить размер блока при наведении?

Question

[s0pran0]

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

Вот пример того, что мне нужно
https://files.fm/f/5epugxs3f

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

Вот пример моего кода.
https://jsfiddle.net/hj8y5szt/2/

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

Answer 1

[Андрей]

Создайте обертку отдельного товара и присвойте свойство position: absolute самой карточке товара

Comments

[s0pran0]

Можно поподробнее?

[s0pran0]

а ещё лучше покажите на моем примере в jsfiddle

[Андрей]

s0pran0, добавьте
.products-list__item{
position: relative
}
.products-list__item .product-card{
position: absolute;
z-index: 2;
}

[s0pran0]

Я пробовал так, но тогда карточки накладываются друг на друга
https://jsfiddle.net/gj48t3Lp/

[Андрей]

[s0pran0]

Спасибо