Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How can I change image colour on hover?


DKVR

Question

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
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

6 answers to this question

Recommended Posts

  • 0

@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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...