Does anyone know how to make black and white images animate to color when you hover over them. This would be like digitally revealing a painting or doing a text fill animation if that makes sense. It's an idea I have for a project.
5
-
1Welcome to Stack Overflow!, Please take the tour, and read how to ask, an On Topic question, then look at the Question Check list, the perfect question and how to create a Minimal, Complete and Verifiable Exampledisinfor– disinfor2024-02-21 00:16:58 +00:00Commented Feb 21, 2024 at 0:16
-
For future reference, "I haven't tried anything yet" is a sure fire way to not get any answers.Phix– Phix2024-02-21 00:34:57 +00:00Commented Feb 21, 2024 at 0:34
-
One way to try things is to get yourself a JSFiddle or CodePen account. They make it very easy to try out code. jsfiddle.net codepen.ioartlung– artlung2024-02-21 00:36:36 +00:00Commented Feb 21, 2024 at 0:36
-
2To those who have closed this question as a duplicate, I believe the OP was asking not about simply switching between B+W and color, but animating the switch. In which case a better resource is this article.Brett Donald– Brett Donald2024-02-21 00:48:52 +00:00Commented Feb 21, 2024 at 0:48
-
1Voting to reopen as the post given as a duplicate does not cover animation (as pointed out by @BrettDonald) and it contains some fairly (in 2024) awful ways round the b/w to color problem. The answer here from @artlung answers the question well and will be useful to future readers.A Haworth– A Haworth2024-02-21 08:12:09 +00:00Commented Feb 21, 2024 at 8:12
Add a comment
|
1 Answer
Look into the filter function saturate which gives the ability to control the saturation of the colors on an element. Along with a transition you get the effect of animation.
a.colorful {
display: inline-block;
color: #fff;
text-align: center;
background-image: linear-gradient(
90deg,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
width: 50vw;
padding: 2rem;
border-width: 0;
font-family: sans-serif;
font-size: 2rem;
text-shadow: 1px 1px 2px #000;
filter: saturate(0);
transition: all 0.2s;
}
a.colorful:hover {
filter: saturate(1);
border: none;
}<a class="colorful">Hello!</a>
2 Comments
Brett Donald
The OP was asking about animating the switch.
vals
@BrettDonald It is animated, but only for 0.2s ...