image hover with a color tint

[doorofperception]

Hello, I'm trying to tint the image hover pics with custom CSS.

What I want is something resembling the gradient map effect from Photoshop (see screenshot attached). So far I only managed to make the pictures b&w :)

If I understand correctly there's no very simple solution for this. You need to use a colored background and then layer the pic on top or something like that.

If anybody could tell me how to do it. That would be awesome.
Thank you — Ben

[alasdair17]

hey, could you not just add a gradient map to the image in photoshop and then upload it as the project thumbnail and then it would show up how you would like it on hover?

[arminunruh]

you can combine css filters

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

look i googled it:
https://stackoverflow.com/questions/44023583/css3-grey-image-to-blue-color-using-filters

this is what i googled:

"use css filter to make image blue"

img{
filter: sepia(100%) hue-rotate(190deg) saturate(500%);
}

[doorofperception]

Thank you, but this doesn't achieve the desired look. I found these examples too.
Black is still black, unlike when using a gradient map that turns the black into a desired color too.

But now I'm on the right track: https://cssduotone.com/

This is what I needed.
Still not sure on how many browsers this is displayed properly though.

[alasdair17]

@doorofperception Can you definitely not just add the effect on the image in photoshop and upload it to wordpress, is that too simplistic to work haha?

[arminunruh]

did you get it to work?
if you dont want the black to be black you can add

filter: brightness(1.2);

or use opacity css on the image
and then use css to have a blue color on the background? idk

this "generate" button gives you the css, did you get it to work with that?

@alasdair17 yea, maybe hes doing a website for a client and doesnt want the client to have to use PS