Как сделать правильно фильтер?

Question

[Максим]

добрый ночь.
подскажите как правильно реализовать такой фильтр карты.
В простом состоянии:

spoiler

Ховер:

spoiler

Я понимаю, что надо как то через css фильтры, но головой не понимаю как вытащить их из файла psd и как правильно реализовать это потом в коде.

Comments

[RAX7]

а в слоях фотошопа что?

[Максим]

RAX7, вот такое

spoiler

[Максим]

RAX7, https://www.72pxdesigns.com/template/freshy-free-p...
вот делаю верстку этого

[RAX7]

Максим, попробуй с цепочкой фильтров поиграться
https://jsfiddle.net/zvhq4y19/
https://css-tricks.com/solved-with-css-colorizing-...
на газ нужного эффекта добьешься

[Максим]

RAX7, спасибо попробую и в этом разобраться.

[SuperToster]

RAX7, Максим,
Если нужна кроссбраузерность, я бы отказался от CSS Filter Effects в пользу background оверлея.
У latest IE указано not supported для filter, и даже в Edge - partial (

[RAX7]

SuperToster, все верно, но оверлеем такого эффекта не получишь.
https://jsfiddle.net/q3owtc0x/
Сначала нужно обесцветить изображение, затем залить вместо серого синий.
Можно использовать фолбэк для ie через @supports

[Максим]

RAX7, цвет фильтра как родной получился.

[RAX7]

Максим, ну почти=)

Answer 1

[SuperToster]

https://jsfiddle.net/7wjLch1v/

upd: или анимация слоя сверху нужна? https://jsfiddle.net/0ab3Lex6/
Сорь не разобрался в задаче )

Когда jsfiddle открываете, ждите несколько секунд, он косячит своими дурацкими оверлеями.

Comments

[Максим]

https://jsfiddle.net/maximiloi/8abhmw63/4/

получается так что контент внутри блока отключается

[SuperToster]

Максим, https://jsfiddle.net/pwkLaux1/ так?

[Максим]

SuperToster, да так, спасибо буду разбираться
И анимацию тоже использую для красоты, чего добру пропадать.

[SuperToster]

Ну или display: none для :hover.