Product images greyscale to colour on hover

Hey guys, 

So I have used this code:

 img.grid-item-image.grid-image-cover {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
div.grid-item:hover img.grid-item-image.grid-image-cover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

to achieve grayscale to colour on hover for my product images.

https://www.rotaterecordings.com/shop-all

It was working completely fine for ages, but I have now noticed using safari it isn't working. It's still currently working on Google Chrome.

Does anyone know why that might be?

3 hours ago, Indi said:

Hey guys, 

 

So I have used this code:

 img.grid-item-image.grid-image-cover {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
div.grid-item:hover img.grid-item-image.grid-image-cover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

to achieve grayscale to colour on hover for my product images.

https://www.rotaterecordings.com/shop-all

It was working completely fine for ages, but I have now noticed using safari it isn't working. It's still currently working on Google Chrome.

 

Does anyone know why that might be?

Try

img.grid-item-image.grid-image-cover {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -ms-filter: grayscale(1);
  -o-filter: grayscale(1);
}
div.grid-item:hover img.grid-item-image.grid-image-cover {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -o-filter: grayscale(0);
}

@bangank36 it still isn't working when I use Safari.