Как тут реализовать вспывающий баттон при ховере?

Question

[senefu]

Привет. Как тут реализовать не нарушая текущей структуры стилей всплывающую кнопку ровно по центру, на место удаляющегося текста при ховере? По центру этого текста естесвенно, а не всего блока .card.

Если сделать аболютно спозиционированный конейнер, то у меня не получается его выровнять точно по центру исчезающего блока текста (да и таких карточек будет несколько и у каждой РАЗНЫЙ размер текста, так что это должно быть универсальное решение).

Ничего в голову не лезет, прошу помощи...

https://codepen.io/kodej/pen/KqGvYO

Answer 1

[Юрий Янин]

А в чем проблема использовать flex? Просто создай общий блок для item-description и кнопки, кнопке дай абсолютку, родителю
display: flex;
justify-content: center;
align-items: center;

https://codepen.io/anon/pen/eRPGvB?editors=1100

И просто дополнительно. Если кидаешь на кодпен, то без препроцессоров, что-бы всем было удобно.

Comments

[senefu]

Отлично, не додумался завернуть все в один тег дополнительно. Спасибо!

[senefu]

ПЕЧАЛЬКА! Ваше решение не работает в Фаерфоксе(( anxious-sponge.surge.sh

Answer 2

[Роман Алфёров]

Думаю, для начала нужно создать саму кнопку, разместить ее в блоке с текстом, как отдельный див(но в диве с текстом), отцентрировать, и не важно, поверх, или сзади находится он. Потом в стилях прописать кнопке display: none. При ховере текст будет исчезать, а кнопке при ховере сделать значение display: block и она будет появляться.

Comments

[senefu]

Все исчезает вместе с кнопкой.

[Роман Алфёров]

senefu: Тогда чуть иначе. Попробуй тогда создать отдельный див, и в него поместить 2 дива с текстом и с кнопкой. И что бы они былb друг на друге, диву с текстом дай свойство position: absolute.
Кнопке даешь сразу display: none, потом ховером на основной див даешь скрыть текст, потом еще 1 ховером показать кнопку. Вот пример: https://codepen.io/anon/pen/RgeeRB

[senefu]

Роман: так анимация не работает...

[Роман Алфёров]

senefu: https://codepen.io/anon/pen/MoPZoR . Вот теперь по идеи работает. Осталось настроить только анимацию кнопке. Ничего не менял, в ксс только снизу приписал свойство для дива который создал.

[senefu]

Роман: нет, нельзя анимировать переходы из display: none. Анимировать можно только цифровые значения.

[senefu]

Если юзать opacity, то это решение не даст универсальности, т.к. позиционирование относительно всей карты. Надо заворачивать вместе с параграфом в див и там позиционировать.

[Роман Алфёров]

senefu: https://codepen.io/anon/pen/MoPZoR Вот такой же вариант, только с top: -9999em, и потом при ховере top: 70%. Вместо дисплея. На этом мои знания заканчиваются, ибо для универсальности нужны фреймворки, с которыми я еще не работал.