Applying green filter to images

[drone4four]

I’m trying to apply color and opacity filters to an image: https://codepen.io/Angeles4four/pen/zdwNwd

I got the opacity filter working, but not the color. I tried adding a green value to both a color property and background-color property in the CSS. But it’s not doing what I want. I feel like the solution I am asking for is going to be very trivial. Any help?

I Googled filter and colorize images css which turned up a helpful guide by CSS Tricks guest blog poster, Amelia Bellamy-Royds, titled “Color Filters Can Turn Your Gray Skies Blue”: https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/
I took a look at Amelia’s CodePens and can’t find the solution I am looking for.

What would you ppl recommend I could try next?

[Beverleyh]

I took a look at Amelia’s CodePens and can’t find the solution I am looking for

I think you’ve overlooked the pens with the feColorMatrix https://codepen.io/AmeliaBR/pen/WvwwME

The matrix is a bit daunting (not something I plan on delving into myself) but you can use this handy online generator to work out the values https://codepen.io/jacobberglund/pen/ORNQAr

There’s also this generator, which is even easier http://blog.andresgalante.com/RGBAtoFeColorMatrix/

In both cases, just slide the bars until you achieve the effect you’re after.

[drone4four]

Thank you, @Beverleyh. I did overlook those pens. And the generator by Andres Galante is tremendously helpful.

[Author]

Posts