York Theme - How can I make the index images greyscale but color on mouseover / hover?

Hi!

I'm trying to code an index page's images to all be greyscale until you hover or mouseover them. Is this possible? I feel like this is a fairly simple fix but I can't figure it out looking at the inspector.

@drawingonblank First, you need to find Index Page ID. See how to: https://beaverhero.com/squarespace-how-to/#HowtoFindPageIDThen Add to Home > Design > Custom CSS

body#collection-563bea6ae4b0ccc59db69084 img {
       -webkit-filter: grayscale(100%);
       filter: grayscale(100%);
   }
body#collection-563bea6ae4b0ccc59db69084 img:hover {
       -webkit-filter: none;
       filter: none;
   }

Ah! Where do I place the ID?

@drawingonblank body#collection-563bea6ae4b0ccc59db69084 is ID (in example i sent above).

Add all code (replace body#...084 with your page id), and insert to Home > Design > Custom CSS

Awesome! That worked! Thank you!!

@tuanphan could I use this code and modify it somehow to make the index thumbnail change to a different image on hover?

5 hours ago, kmast said:

@tuanphan could I use this code and modify it somehow to make the index thumbnail change to a different image on hover?

Try https://www.mybilliedesigns.com/blog/squarespace-customization-html-hover-effect