Apply a filter with CSS to change colors of a picture

In this CodePen, a filter is used to turn a blue color into a grey color:

filter: grayscale(100%);

How can I change the color to blue/red/green using css filters?

https://codepen.io/wiseoldman/pen/RVRgyB

3 Answers
3

you can use filter hue-rotate(*x*deg) to change the colors, here I have attached code.

hue-rotate(*x*deg)

body align-items: center; display: flex; font-family: Helvetica, sans-serif; height: 100vh; justify-content: center; margin: 0; body div font-size: 15px; margin-top: 15px; text-align: center; form#smileys input[type="radio"] -webkit-appearance: none; width: 90px; height: 90px; border: none; cursor: pointer; transition: border .2s ease; -webkit-filter: grayscale(100%); filter: grayscale(100%); margin: 0 5px; transition: all .2s ease; form#smileys input[type="radio"]:focus outline: 0; form#smileys input[type="radio"].happy:hover,form#smileys input[type="radio"].happy:checked -webkit-filter: hue-rotate(300deg); filter: hue-rotate(300deg); form#smileys input[type="radio"].happy background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/happy_ampvnc.svg") center; background-size: cover; form#smileys input[type="radio"].neutral:hover,form#smileys input[type="radio"].neutral:checked -webkit-filter: hue-rotate(10deg); filter: hue-rotate(10deg); form#smileys input[type="radio"].neutral background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/neutral_t3q8hz.svg") center; background-size: cover; form#smileys input[type="radio"].sad:hover,form#smileys input[type="radio"].sad:checked -webkit-filter: hue-rotate(160deg); filter: hue-rotate(160deg); form#smileys input[type="radio"].sad background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/sad_bj1tuj.svg") center; background-size: cover; .mtt position: fixed; bottom: 10px; right: 20px; color: #999; text-decoration: none; .mtt span color: #e74c3c; .mtt:hover color: #666; .mtt:hover span color: #c0392b;

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <form id="smileys"> <input type="radio" name="smiley" value="sad" class="sad"> <input type="radio" name="smiley" value="neutral" class="neutral"> <input type="radio" name="smiley" value="happy" class="happy" checked="checked"> <div>It looks like you're feeling <span id="result">happy</span> today..</div> </form> <a class="mtt" href="https://morningtrain.dk" target="_blank"> With <span>♥</span> from Morning Train </a> </body> </html>

Thank you so much, this is exactly what I've been looking for.

– toms
Sep 9 '18 at 9:13

@toms You're welcome, please accept the solution, if this is exactly what you have been looking for.

– chintuyadavsara
Sep 9 '18 at 9:26

there is a filter called hue-rotate for similar thing
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

hue-rotate

why do you want to use filter for that you can directly use color or background-color properties for this.

color

background-color

Very easy when using the hue-rotate() filter.

hue-rotate()

Make your images red, which has a hue value of 0, then use a hue chart to grab the colours you require for the hue rotation.

Use the filter:grayscale(1) to set all images to grey, then on hover, set the grayscale to 0 and adjust the colour values.

filter:grayscale(1)

enter image description here

.colorRed,.colorBlue, .colorGreen filter:grayscale(1); .colorRed:hover,.colorBlue:hover, .colorGreen:hover filter:grayscale(0); .colorRed img:hover filter:hue-rotate(0deg); .colorBlue img:hover filter:hue-rotate(215deg); .colorGreen img:hover filter:hue-rotate(100deg);

My pleasure. If it answers your question, don't forget to flag it as an answer with the tick box. And if you need any other help, just let me know :)

– Invariant Change
Sep 9 '18 at 9:15

And I should have mentioned, I decided not to change your oringal code, but rather show it used in another way, showing the technique of starting of with a red colour to help get your other colours values and how you can set all to grey before one is chosen. This could then be adapted to your current code.

– Invariant Change
Sep 9 '18 at 9:21

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Dfyjkt