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

Question

[ItWorld]

Здравствуйте. Помогите пожалуйста сделать так, чтобы при наведении на мою карточку товара появилась всплывающая кнопка и сверху 2 строки текста как на скриншоте. Буду очень благодарен!!!

Comments

[KononovD]

ай-ай-ай, обманывать школьников собрался? фуфуфу)

Answer 1

[sodiqit]

Создаешь дополнительный блок с содержимым всплывающего окна, position:absolute, самой карточке position:relative, прикрепляешь координатами и скрываешь display:none, а при наведении на карточку display:block.

Comments

[ItWorld]

https://jsfiddle.net/691Lrekw/

Не получилось.

[sodiqit]

Создай общий контейнер и туда положи карточку товара и кнопку, которую оберни в свою обертку, задай ей размеры(как у карточки товара) и position:absolute, и наложи на карточку товара, скрой opacity:0. Далее просто указываешь что при наведении на общий блок(где лежит карточка товара) должен появится блок с кнопкой(и остальным содержимым) с помощью opacity:1. И все.

P.S.
Лучше не делать такие фильтры, чтобы не париться с z-index-ами, а лучше задать блоку с кнопкой цвет как у твоего фильтра

[ItWorld]

sodiqit, Спасибо.