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

Question

[Даниил Конев]

Верстаю макет, дошел до момента, где при ховере появляется кнопка добавления в корзину. При чем одна должна появляться только на определенном блоке, если на него наведен курсор мыши. Я пробовал вариант jsfiddle.net/V6VWC/4 Но при наведении показывает все блоки:)) и при этом конструкция не должна смещаться если у одного блока появится дополнительный, то есть что бы высота оставалась везде одинаковой и блоки не смещались.
Пример как мне нужно при наведении:


Моя верстка тут: https://dk-web.site/

Answer 1

[Никита]

Как вариант. Поэтапно:
1. Кнопку скрываем (display: none) и позиционируем абсолютно (position: absolute)
2. Для карточки дописываем стили с тенью и фоном в псевдокласс (например, ::before) и скрываем его
3. При наведении на карточку показываем (display: block) кнопку и псевдокласс

Черновик: jsfiddle.net/wL7fz80a

Comments

[Даниил Конев]

Получилось! Спасибо большое, псевдоклассы рулят)