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?
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?
Very easy when using the hue-rotate()
filter.
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.
.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>
you can use filter hue-rotate(*x*deg)
to change the colors, here I have attached code.
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>
there is a filter called hue-rotate
for similar thing
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
why do you want to use filter for that you can directly use color
or background-color
properties for this.