Jump to content

Product images greyscale to colour on hover

Recommended Posts

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?

Link to comment
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);
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.