how do i make imagez grayscale/monotone unless hovred over?

<!-- example image -->

<img src="https://files.catbox.moe/j6m91f.jpg" alt="Description of image" width="500" height="300">

<style>
/*make img of your choice grayscale*/
img {
filter: grayscale(100%);
transition: filter 0.3s ease;
}

/*make it colorful on hover*/
img:hover {
filter: grayscale(0%);
}

/*transition: filter 0.3s ease; is optional. makes it smoother. you can change the value as you please*/

</style>

if you dont understand any part of the code lmk, most of it is optional/you can change. the only that matters is the "filter: grayscale()"