Greyscale Image Boxes and Recolour on Hover

[isSalon]

Hi, 

I am trying to change these boxes to greyscale and have them re-colour on hover. 

Any help would be greatly appreciated. 

[Moeed]

Hey @isSalon 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
ul.grid.gap-1.md\:auto-rows-fr.grid-cols-2.md\:grid-cols-4.list-style-none li:hover {
    filter: grayscale(0) !important;
}
ul.grid.gap-1.md\:auto-rows-fr.grid-cols-2.md\:grid-cols-4.list-style-none li {
    filter: grayscale() !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed