Это делается в два слоя. На первом - картинка, название и вся сопутствующая информация. На втором - кнопки добавления в корзину, поделится и лайк. Второй слой изначально делаете скрытым, рисуете его поверх (position: absolute), скрываете (opacity: 0; visibility: hidden;). При (:focus, :focus-within и :hover) показываете (opacity: 1; visibility: visible;).
Возможно добавляете JS, чтобы узнать, был ли наведен курсор и после убран с карточки (именно в таком порядке), чтобы скрыть второй слой (сделать .blur, если пользователь сфокусирован).
Простой
Простой
