Как сделать плавную смену фона?

Question

[MisTFoR]

Здравствуйте!
У блока имеется задний фон (картинка), при наведении мышкой на этот блок - задний фон сменяется.
Нужно - что бы смена фона была плавной.
Вот код, что бы было более понятней

<div class="block"></div>

.block{
   background: url(img/background-1.png)
}
.block:hover{
   background: url(img/background-2.png)
}

Answer 1

[Рома Зварич]

Можно сделать через два псевдоэлемента с разными фонами.
При наведении на блок, первый становится прозрачным, а второй (который был прозрачным), наоборот становится видимым

Результат:
https://codepen.io/hisbvdis/pen/QWLVWey

Answer 2

[Rustam Bainazarov]

Плавная смена background-image только в Chrome работает, поэтому так.