С помощью чего можно сделать эффект как на фото?

Question

[sirenko]

Comments

[Сергей Сергей]

отрицательные внешние отступы

Answer 1

[robodead]

Просто padding добавляются вверх вниз, а у контейнера, который содержит все три карточки display: flex; align-items: center;
Для карточки прописываешь при наведении добавление padding-top padding-bottom и цвета другие и все

Answer 2

[approximate solution]

Если вы про явное увеличение центрального блока(например при наведении), то:
в этом случае поможет transform: scale + z-index.

transform будет увеличивать размер активного блока(например при наведении), а z-index позволит имитировать эффект наложения блока на соседний ради красоты.

Comments

[sirenko]

Спасибо. А как сделать, чтобы, например, при наведении на basic, он центрировался( basic), а premium занимал его место(слева)?

[FeST1VaL]

sirenko, как по мне такого лучше не делать.

[sirenko]

FeST1VaL, почему? А вообще практически это возможно реализовать?

[approximate solution]

sirenko, Логично было бы менять order у дочерних элементов, но тогда встал бы вопрос - вы наводите на ребенка, он меняет order, но ваша мышь указывает на другой элемент. В итоге это негативно скажется на общей анимации.

Поэтому вполне хватит и такой анимации


Либо же:

Использовать библиотеку слайдера или написать логику на JS, которая будет при клике крутить слайдеры по кругу, центруя активный:

https://jsfiddle.net/7cfmvo1w/4/

[sirenko]

approximate solution, поняла, спасибо.

[mikeyuriev]

Не надо в таких случаях вообще никакой анимации движения. Собрался юзер на кнопочку тыкнуть - а она из под мышки улетает куда-то. Просто прекрасно.

[FeST1VaL]

sirenko, потому что логика пользователя ломается. Идет четкое же распределение уровень 1 уровень 2 и уровень 3. Зачем делать 2 1 3... Короче не логично это вот и все...

[approximate solution]

FeST1VaL, Слайдер бы решил данную проблему. Т.к бывают глупые дизайнеры которые придумывают логику, не понимая UI\UX.

https://jsfiddle.net/7cfmvo1w/4/
Просто убирать верхний активный слайдер, зацикливать слайды, и по клику прокручивать их центрируя кликнутый. Условно кликнули на левый - крутим на item + 1. И по аналогии.

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

Если не говнокодить, писать свой слайдер, что бы не тянуть за собой всю библиотеку.

[FeST1VaL]

approximate solution, как по мне в таком блоке слайдер это лишнее)

[approximate solution]

FeST1VaL, Не спорю) это всего лишь реализация технической задачи, а по поводу того как она решается, и логическое поведение блока - это должен был задать ТС вопрос дизайнеру. Что подразумевал дизайнер, когда рисовал данный блок, а не лепить отсебятину)