@WebN00b

Как сделать плавное появление псевдоэлемента?

У меня есть карточки. При наведении на них, один слой должен изменять своё положение на 10px вверх и влево, а также должен появляться поверх этого градиент.
Его я сделал с помощью псевдоэлемента ::after. При наведении анимация изменения своей позиции происходит плавно, в то время как псевдоэлемент возникает и пропадает резкою
...
5d360068abc40943961061.png
5d360071be9ac156915723.png
Вопрос заключается в следующем: как сделать плавным появление и исчезновение этого элемента, а также как сделать задержку перед исчезновением.
...
P.S. код я не смог выгрузить на кодпен из-за того что писал я его на SASS, а & CodePen не любит
Огромное спасибо за поддержку!
  • Вопрос задан
  • 2575 просмотров
Решения вопроса 1
profesor08
@profesor08 Куратор тега CSS
.block {
  &:after {
    pointer-events: none; // чтоб не мешался
    opacity: 0;
    transition: ease opacity 0.3s;
    transition-delay: .0s; // при убирании курсора анимация сразу сработает
  }

  &:hover {
    &:after {
      opacity: 1;
      transition-delay: .5s; // время, которое элемент должен ждать после наведения курсора
    }
  }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
alex-1917
@alex-1917
Если ответ помог, отметь решением
Блок с градиентом делать через псевдоэлемент -ошибка, у тебя же там текст с оформлением должен быть?.
Еще один блок делай и вся недолга.
Ну а насчет псевдоэлемента и анимации - все работает, у тебя где-то ошибка в твоем секретном коде...
www.jooom.ru/toster/css1.html
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы