Как правильно поправить верстку?

Question

[Дмитрий Жуков]

Приветствую!
Проблема такая: есть категория с карточками товаров. Отображается только фото с названием. При наведении курсора, выпадает внизу дополнительный блок с подробностями (:hover -> display:block, position:absolute, z-index:999), перекрывающий ниже находящиеся блоки. Все работает нормально. Но, если в последнем, нижнем ряду карточек оказывается Одна, то, при наведении, ниже находящийся блок прыгает вверх. Оно и понятно - активная карточка выпадает из потока и нижние блоки ничто не удерживает (как удерживали бы др. карточки, если бы были в этом же ряду).
Ломал-ломал голову, но и так не придумал, какой костыль можно придумать....

Страница с проблемой

Comments

[Александр Лысенко]

Уберите абсолютное позиционирование у последнего элемента, если js не вариант

[Дмитрий Жуков]

AlexanderZe: в таком случае эта карточка наоборот, будет вниз все блоки сдвигать...

[Александр Лысенко]

Дмитрий Жуков: А... т.е. вы хотите оставить эффект тем же, но не прибегать к js?

[Дмитрий Жуков]

AlexanderZe: я не против js, но как сделать проверку - один этот блок в своем ряду или нет - ума не приложу

[Rheinmetall]

Дмитрий Жуков: Сейчас я возможно скажу что-то невероятно нелепое, но что если через JS брать высоту блока в котором у тебя находятся карточки товаров и при наведении на них задать этому же блоку опять через JS эту же высоту?

[Дмитрий Жуков]

Rheinmetall: а что, как вариант ) попробую

[Александр Лысенко]

Дмитрий Жуков: а еще вы можете для такого элемента делать показ всплывающего блока в сторону.

[Rheinmetall]

Дмитрий Жуков: Кстати попробовал, вроде работает

Answer 1

[Valentin Khokhlov]

можно задать псевдоэлемент-распорку для последнего блока

.product-layout:last-of-type::after {
  content: '';
  diplay: block;
  position: static;
  height: 559.5px; /* высота неразвернутого блока у вас постоянная */
}

Comments

[Дмитрий Жуков]

Действительно...куда уж проще.
И без скрипта обошлось.
Спасибо!

Answer 2

[Егор Живагин]

position: relative вместо абсолюта, не?

Comments

[Valentin Khokhlov]

в этом случае блоки при наведении начнут отталкивать нижележащие

можно конечно задать relative только для последнего

.product-layout:last-of-type .product-thumb {
  position: relative;
}

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

[Егор Живагин]

Valentin Khokhlov: да, точно. Хотя я бы просто задал transition и, на мой вкус, всё было бы нормально. Но вариант с after тоже отличный