how to make smooth grayscale on hover using CSS : <p>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.</p>

<p>This is my code</p>

<pre><code>&lt;img alt="TT ltd logo" src="./img/tt-logo.png" class="tt-logo" /&gt;

   &lt;style&gt;
    img.tt-logo {
      filter: grayscale(1);
      transition: grayscale 0.5s;
    }

    img.tt-logo:hover {
      filter: grayscale(0);
    }
   &lt;/style&gt;
</code></pre>
