dmc1989
@dmc1989

Как применить transition-delay к ::after?

Почему данная конструкция не срабатывает?
a
  position: relative
  display: block
  &:hover
    &::after
      transition: all 2s ease-in-out
      content: ''
      display: block
      position: absolute
      left: 0
      top: 0
      width: 100%
      height: 100%
      background-color: rgba(#ffffff, 0.75)
  img
    width: 100%
    height: auto

При наведении на ссылку в виде блока с картинкой белый, немного прозрачный блок на ввесь блок появляться сразу. Как сделать плавное появление?
  • Вопрос задан
  • 200 просмотров
Решения вопроса 1
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Krasnodar_etc
@Krasnodar_etc
little front
Дело в том, что у вас не существует блока до наведения, потому что нет стиля content до этого. Плавно создать блок в нужном месте браузер не может.

Решение - создайте блок изначально прозрачным и с отрицательным z-index . А по наведению меняйте только эти свойства
Ответ написан
Комментировать
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Потому что сначала нада описать стили для псевдо элемента, а уже при ховере его анимировать
Ответ написан
Ваш ответ на вопрос

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

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