How can I change image colour on hover?

Bedford - I just want to put the change colour effect (turning grey colour to full original colour) for an only certain part (people images), not for all of the pictures, do you know how to do in this case?

![alt text][1]

website:https://heron-reed-4c73.squarespace.com

password:123456

@tuanphan

@DKVR Remove the code

.image-block {
   transition: filter .3s ease-in-out;
   filter: grayscale(100%)
}

.image-block:hover {
   filter: grayscale(0%)
}

and replace with

div#page-5d3a732e5476100001b1464f .image-block {
   transition: filter .3s ease-in-out;
   filter: grayscale(100%)
}
div#page-5d3a732e5476100001b1464f .image-block:hover {
   filter: grayscale(0%)
}

Perfect!!! Hero!

Thank you so much!!!

Perfect!!! Hero!

Thank you so much!!!

@DKVR You're welcome. Have you a great weekend.

On 8/1/2019 at 4:02 PM, DKVR said:

Bedford - I just want to put the change colour effect (turning grey colour to full original colour) for an only certain part (people images), not for all of the pictures, do you know how to do in this case?

![alt text][1]

website:https://heron-reed-4c73.squarespace.com

password:123456

@tuanphan

Hi @tuanphan! I'm trying to do something similar on my site: https://borderlesscolors.com/home

 I want to apply the effect only to the images in #new-page-1-1 , I was able to achieve it with this code: 
#new-page-1-1 img { filter: grayscale(100%); transition: filter .3s ease-in-out;}  #new-page-1-1 img:hover { filter: none;}

However, I'm wondering how to change this so the effect occurs when you scroll down instead of when you hover. Can you help me with this? (I want the image colors to change when the user scrolls down whether or not they hover right over each image). I appreciate your help.

On 8/29/2021 at 6:33 AM, Aurola said:

Hi @tuanphan! I'm trying to do something similar on my site: https://borderlesscolors.com/home

 I want to apply the effect only to the images in #new-page-1-1 , I was able to achieve it with this code: 
#new-page-1-1 img { filter: grayscale(100%); transition: filter .3s ease-in-out;}  #new-page-1-1 img:hover { filter: none;}

However, I'm wondering how to change this so the effect occurs when you scroll down instead of when you hover. Can you help me with this? (I want the image colors to change when the user scrolls down whether or not they hover right over each image). I appreciate your help.

 

 

 

Hi,

This will require JavaScript Code. Complex. I can't help with this.

you can post on some FB groups
+ Squarespace Customization Resource Groups
+ Squarespace Community