Как верстаются подобные блоки?

Question

[Александр Арбузов]

Как верстается эффект при наведении на блок подобный этому - moskva.beeline.ru/customers/products (блок "Популярные тарифы и услуги").
Похожая тема - www.wildberries.ru/catalog/51/men.aspx
Тут у карточек товара при наведении появляется целый блок, которого изначально не видно.

Answer 1

[Ольга Стогова]

целый блок там не появляется, просто ставиться border, и к дочерним элементам display: block;

Comments

[Ольга Стогова]

ой ну там вариантов куча:

1. Ставить изначальный бордер под цвет фона, а при наведении красить;
2. Ставить сначала padding в ширину бордера, при наведении добавлять бордер и убирать padding
3. Ставить не бордер, а outline или shadow.

ну чесслово, как маленькие)) элементарно ж

Answer 2

[Trow_eu]

display:none + hover
visibility:hidden / visibility:visible как именно переключается стиль не углядел, возможно через js
копать где-то там )

Answer 3

[Денис Инешин]

У билайна это просто эффект при наведении. ouline/border + тень + анимация.
У вайлдберриз это точно позиционированный попапчик, появление и вычисление позиции может делаться как на css, так и через JS.

Comments

[Виталий Киренков]

вайлдберриз - не попап, а поповер. И делается он на чистом ксс, по ховеру показывается скрытый блок с галерейкой.

[Денис Инешин]

Можно и так сделать.