Jump to content

How can I change image colour on hover?

Go to solution Solved by tuanphan,

Recommended Posts

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

poeple.jpg.a6d7e553dad50f98a600e711d9ecbf3f.jpg

Edited by Paul2009
Link to comment
  • Replies 6
  • Views 3.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

@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%)
}



Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...
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

poeple.jpg.a6d7e553dad50f98a600e711d9ecbf3f.jpg

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.

 

 

 

Screen Shot 2021-08-28 at 7.29.09 PM.png

Link to comment
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.

 

 

 

Screen Shot 2021-08-28 at 7.29.09 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.