I have logo in my website, it is grayscaled on hover i want it to be colored smoothly. it is working but not smoothly. i am using CSS transition.
This is my code
<img alt="TT ltd logo" src="./img/tt-logo.png" class="tt-logo" />
<style>
img.tt-logo {
filter: grayscale(1);
transition: grayscale 0.5s;
}
img.tt-logo:hover {
filter: grayscale(0);
}
</style>
Try do it this way:
img.tt-logo {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
transition: all 0.5s ease;
}
img.tt-logo:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}
and every image has its own alt
, you can use it without using img.class
:
img[alt="TT ltd logo"] {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
transition: all 0.5s ease;
}
img[alt="TT ltd logo"]:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}
in this case class
is extra
Animating a filter takes a lot of computation and might hurt performance in some browsers.
You can get better performance by animating the opacity
of a grayscale image to reveal a full-color image beneath it.
Here's an example.
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