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

Question

[Evgeniy]

www.rusta-l.ru
Хочу сделать вот такую анимацию в третьем блоке.

Пробывал через opacity, но текст тоже начинает исчезать при ховере. Как можно решить эту проблему?

Comments

[alex]

через псевдоэлемент. и z-index'ы расставить

[Evgeniy]

Alex, не получается. Можете подробнее рассказать? Я написал z-index но он почему-то не работает

Answer 1

[Дмитрий Дерепко]

Сорян, но в 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
}

Comments

[Lord_Dantes]

Что это за бред