Как реализовать затемнение слоя между текстом и картинкой?

Question

[novik861]

Всем привет)
На данный момент обучаюсь на webDev, и дали вот такое задание:
Задание: Наведение на карточку затемняет корректирующий слой до 80%.
Вопросы:
1)Как реализовать этот корректирующий слой между картинкой и заголовками?
2)Как сделать эту анимацию?

Comments

[Rustam Bainazarov]

Фон блока в rgba или отдельный слой с прозрачностью.

[novik861]

Рустам Байназаров, можно более развернутый ответ:D

Answer 1

[Николай Чуприк]

Был недавно похожий вопрос. Мой вариант решения: включать полупрозрачную мегатень превосходящих размеров от блока Colors fo Kamchatka.