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

Question

[mihailmosienko]

https://karambola-shop.ru/ - вот об этом сайте и пойдет речь.
Суть проблемы: при наведении курсора на карточку любого товара товара, происходит ее выделение, при этом происходит смешение всего остального вниз, что нужно сделать чтобы исправить это? Заранее спасибо.

Answer 1

[JesterJenkins]

Смещает блок появляющаяся надпись "В желаемое". Можно задать блоку с товаром без наведения минимальную высоту (min-height) такую же, какой она будет с наведением.

Comments

[mihailmosienko]

Большое спасибо.

Answer 2

[Максим]

https://codepen.io/topicstarter/pen/bJzjmb - если надо объяснение спросите ....по этому принципу это делается

Comments

[mihailmosienko]

Спасибо

[Максим]

mihailmosienko, отметить решением не забываем если ответ помог

[Рома Зварич]

Максим Ленский, если не ошибаюсь, здесь вроде принцип немного другой.
Раз Вы хорошо в этом разбираетесь, позвольте уточнить, правильно ли я его понимаю.

1) Задаётся блок основной карточки товара с { position: relative }, размер которой не меняется и при наведении.
2) Внутри задаётся еще один блок с непосредственно содержимым, которому при наведении задаётся { position: absolute } и которому можно задавать любые размеры и позиционирование, ведь он выпадает из потока блоков и привязан к местоположению основной карточки.

Правильно?
Заранее благодарен за ответ.

[Максим]

Рома Зварич, правильно ...но только я там при hover сделал border-top видимым у появляющегося блока и border-bottom убрал у видимого блока