DKVR Posted August 1, 2019 Share Posted August 1, 2019 (edited) 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 Edited August 2, 2019 by Paul2009 Link to comment
Solution tuanphan Posted August 1, 2019 Solution Share Posted August 1, 2019 @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 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
DKVR Posted August 1, 2019 Author Share Posted August 1, 2019 Perfect!!! Hero! Thank you so much!!! Link to comment
DKVR Posted August 1, 2019 Author Share Posted August 1, 2019 Perfect!!! Hero! Thank you so much!!! Link to comment
tuanphan Posted August 3, 2019 Share Posted August 3, 2019 @DKVR You're welcome. Have you a great weekend. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Aurola Posted August 28, 2021 Share Posted August 28, 2021 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. Link to comment
tuanphan Posted August 31, 2021 Share Posted August 31, 2021 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment