Как сделать transition для смены фона

Question

Подскажите пожалуйста, почему не работает плавное появление фона ?

.item {
      box-shadow: 0 10px 35px rgba(38, 42, 76, 0.1);
      width: 400px;
      height: 200px;
      border: 1px solid #ccc;
      transition: all 1s;
    }

    .item__descr {
      width: 200px;
      margin: 100px auto 0 auto;
    }

    .item:hover {
      background: url('https://img.evbuc.com/https%3A%2F%2Fcdn.evbuc.com%2Fimages%2F51273650%2F36261757830%2F1%2Foriginal.jpg?auto=compress&s=c9b0e4da4e0d21232c73f05060370483') no-repeat;
      background-size: cover;
      color: #fff;
    }

    <div class="item">
    <div class="item__descr">Наведи на меня</div>
    </div>

Answer 1

Так как Animation type = discrete, то можно и нужно воспользоваться другими способами. Например, псевдоэлементом и прозрачностью:

.item {
  position: relative;
  height: 200px;
  width: 400px;
  border: 1px solid #ccc;
  box-shadow: 0 10px 35px rgba(38, 42, 76, 0.1);
  transition: all 1s;
}
.item:hover { color: #fff; }

.item::before {
  content: '';
  position: absolute;
  z-index: -1;
  height: inherit;
  width: inherit;
  background-image: url('https://img.evbuc.com/https%3A%2F%2Fcdn.evbuc.com%2Fimages%2F51273650%2F36261757830%2F1%2Foriginal.jpg?auto=compress&s=c9b0e4da4e0d21232c73f05060370483');
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transition: all 1s;
}
.item:hover::before { opacity: 1; }

.item__descr {
  margin: 100px auto 0 auto;
  width: 200px;
}

<div class="item">
  <div class="item__descr">Наведи на меня</div>
</div>

БЛОГ НА HUSL

Как сделать transition для смены фона

Ответы (1 шт):