Анимация при наведении — выпад блоков, как сделать?

Question

[Alexander Frontend - Developer]

Выглядит вот так:

При наведении происходит следующее:

Всё это естественное под транзишном, медленно появляется( верхний красный блок сверху выпадает, как стикер )

Как это сделать?
Вот что у меня:

При наведении:

Всё криво и не плавно

Код:


https://codepen.io/barbarossa356/pen/mdrYrNm?edito...

Comments

[Дима]

Так у вас стикер тоже плавно появляется после наведения на блок, что вы еще хотите?

[Alexander Frontend - Developer]

Дима, Нет, у меня бэкграунд появляется через 1 секунду и медленно, а надо чтобы сразу при наведении он медленно появлялся

[t800zippygod]

все это через CSS пишется, вам надо сделать абсолютно позиционированный элемент относительно контейнера растянуть его на весь родительский через w100%, h100%. Дать ему полупрозрачный бэкграунд.
при ховере его прозрачность становится 1, изначально 0. Стикер кладете в контейнер задаете ему абсолютное позиционирование, display: none и transitionY(-50px) например, при ховере на контейнер - стикер становится display: block и transitionY какой Вам нужен

[Alexander Frontend - Developer]

t800zippygod, Не правильно, ничего не вышло и не помогло

[t800zippygod]

Alexander Frontend - Developer, скорее всего это из-за display: none, он вырубает все transition на элементе, тогда ставь opacity: 0, а при клике opacity: 1

[Alexander Frontend - Developer]

t800zippygod, Как сделать выдвигающийся элемент из блока?
Вот посмотри пожалуйста.. Я все переписал, но не получается все ровно

[t800zippygod]

Alexander Frontend - Developer, скорее всего ты переписал не совсем так, как я предложил, мне честно не очень удобно ковыряться в коде
Ещё раз:
1) Создай два дива внутри родительского (то есть внутри контейнера карточки): один для стикера и один для проявляющегося фона, который будет затемнять карточку. Обоим дивам укажи transition.
P.S. Не забудь контейнеру указать position: relative
2) Задай для дива, в котором будет лежать фон position: absolute, width: 100%, height: 100%. Так он растянется по размеру карточки. Потом дай ему background-colour с прозрачностью, чтобы было видно контент карточки, но он как бы казался накрыт фоном.
3) Задай диву с фоном изначальные параметры для его сокрытия: можешь скрыть с помощью opacity: 0 или height: 0. Это уже от твоих предпочтений, в зависимости от того, какую хочешь увидеть анимацию при появлении.
4) Задай диву со стикеров position: absolute, top: 0, left: тут уже унеобходимый отступ слева от контейнера карточки. Опять же скрой его изначально: opacity: 0, trnslateY(-сколько-то px) и тд. Опять жу по вкусу, смотря каким хочешь видеть его появление.
5) При ховере на карточку задавай диву со стикером и с фоном такие параметры, какие нужно.
Учитывай то, что анимироваться будут лишь те параметры, которым указано дефолтное значение. Например, если ты задал для стикера opacity: 0, а потом opacity: 1 — оно проанимируется. А вот если ты ему дал translateY, но изначально оно не было указано — то элемент просто перескочит бух всякой анимации.
Также учитывай, что значения надо задавать явно в конкретных единицах для анимации. Так height: 0 -> height: 100% — проанимируется. А вот height: 0 -> height: auto — нет.
И ещё, если ты скрывшь элемент через display: none, то все анимации у него пропадают.
Вроде все доступно описал, удачи