Menu
I've seen many websites that have a black and white image that transitions to a colored version with a :hover selector. What I'm trying to do is the same but with no user interaction. For example, the image would start black and white and fade to its colored version after 10 seconds.
Is this possible with CSS?
596
You can use filter: -webkit-filter: grayscale(1) invert(1); filter: grayscale(1) invert(1); Or just use invert(1) instead of grayscale(1) invert(1) if you have black and white image.
Given an image and the task is to change the image color using CSS. Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function.
For the transition background image, we use the transition property in CSS and add a transition to the background image in the style tag. transition: background-image 3s; In the script section, we create an image object and add the source of the image that needs to be transitioned.
@keyframes toColor {
0% { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
25% { -webkit-filter: grayscale(75%); filter: grayscale(75%); }
50% { -webkit-filter: grayscale(50%); filter: grayscale(50%); }
75% { -webkit-filter: grayscale(25%); filter: grayscale(25%); }
100% { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
}
img.desaturate {
animation: toColor 10s;
}<img src="http://i.imgur.com/gMPdDHk.jpg" alt="Lena Söderberg" style="width: 300px;" class="desaturate">If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
