Apply a filter with CSS to change colors of a picture
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>
@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)
.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);
<span class="colorGreen"><img src="https://i.imgur.com/ZbOHifU.png" width="100px";></span>
<span class="colorBlue"><img src="https://i.imgur.com/msjbI0M.png" width="100px";></span>
<span class="colorRed"><img src="https://i.imgur.com/tycbKyW.png" width="100px";></span>
<div class="colorRed"><img src="https://i.imgur.com/A7A9wec.jpg" width="500px";></div>
<div class="colorBlue"><img src="https://i.imgur.com/A7A9wec.jpg" width="500px";></div>
<div class="colorGreen"><img src="https://i.imgur.com/A7A9wec.jpg" width="500px";></div>
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
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.
Thank you so much, this is exactly what I've been looking for.
– toms
Sep 9 '18 at 9:13