Как пофиксить overflow hidden?

Question

[lololoshka2010]

Добрый день, как пофиксить баг, при котором обрезается часть контента из-за overflow hidden? Баг находится на главной странице при наведении на карточку товара: https://omarket-g7ulquau0-konstantin1228.vercel.ap...

Comments

[Сергей delphinpro]

Это не баг, а штатное поведение overflow:hidden.

[lololoshka2010]

Сергей delphinpro, я понимаю, а как поправить?

[Danny Arty]

lololoshka2010, что вы хотите добавиться ховер эффектом? Увеличения карточки? Используйте scale() лучше

[Сергей delphinpro]

lololoshka2010, ну по-разному. Основная мысль – сделать так, чтобы карточка не выходила за пределы обрезки, либо была полностью за пределами.
В некоторых случаях можно паддинги добавить для обрезающего блока.
Иногда – генерить карточки на лету в контейнере body и позиционировать их абсолютом в нужном месте по ховеру/клику.
А иногда можно и вовсе отказаться от обрезки, визуально перекрывая ненужные части слайдов по краям отдельными блоками.
Вариантов – масса.

[lololoshka2010]

Danny Arty, да, она должна полностью перекрывать картинку из-за position absolute при этом не увеличивая размеры слайдера

[Сергей delphinpro]

lololoshka2010, в вашем случае такое сильное увеличение по ховеру абсолютно не юзабельно. Нужно извратиться, что бы навести на нужную карточку.
Тут лучше сделать кнопочку "Быстрый просмотр", и уже по клику открывать всплывающее окно.
Посмотрите, как это сделано в других магазинах.

Answer 1

[Алескей Дворяшин]

Попробуйте при наведении на карточку (если возможно) убрать overflow: hiden:

.kartochka-tovara:hover{
overflow: auto;
}

Ещё: когда вы наводите на товар, картинка увеличивается, но вверх и влево не смещается, поэтому получается криво. Когда вы наводите на карточку товара, то и слева, и справа должно оставаться одинаковое расстояние. Также и снизу, и сверху должно оставаться равное расстояние.
Надеюсь, вы меня поняли