Как при hover сделать такую анимацию?

Сорян, но в Chrome Версия 74.0.3729.169 (Официальная сборка), (64 бит) не работает эта анимация :(
Я так понимаю, вы хотите при наведении закрасить фон и сменить цвет?
Делается это и почти любое другое с анимацией примерно так:

.div{
  background-image: url(...);
  color: black;
  transition: all 0.5s ease-out; # это для работы анимации. можно настроить нужные эфекты, длительность и все остальное
}
.div:hover {
  background-image: url(...); # если хотим сменить картинка при наведении
  color: white; # аналогично верхнему комментарию
  transition
}