Как сделать появление текста на картинке с блюром?

Question

[koscsshtml]

Добрый день, суть вопроса такая. Есть картинка как на скриншоте



Необходимо сделать, чтобы при наведение на кирпич появлялся текст + сам кирпич становится с opacity: 0.5;
Я делаю блюр при наведение, но как сделать чтобы еще текст появился не знаю.


Сложность в том, что картинка с прозрачным фоном, и просто создать оверлей не получится.

Возможно есть какие-то решения?

Answer 1

[drawnofmymind]

filter grayscale

Comments

[koscsshtml]

Спасибо, но можно чуть подробнее?

[drawnofmymind]

koscsshtml, https://developer.mozilla.org/ru/docs/Web/CSS/filter

[koscsshtml]

Я понял как сделать блюр, но появление текста как с этм совместить?

[Максим]

koscsshtml, https://codepen.io/topicstarter/pen/OJyoNyq - так ?