tuanphan Posted May 12, 2021 Share Posted May 12, 2021 @Peter-Source .no-touch #collection-5ff60835f2fc6a5e3d684edd .grid-item img { -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.3s; } .no-touch #collection-5ff60835f2fc6a5e3d684edd .grid-item:hover img,.no-touch #collection-5ff60835f2fc6a5e3d684edd .grid-item:focus img { -webkit-filter: grayscale(0%); filter: grayscale(0%); transition: all 0.3s; } 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
Peter-Source Posted May 12, 2021 Share Posted May 12, 2021 48 minutes ago, tuanphan said: @Peter-Source .no-touch #collection-5ff60835f2fc6a5e3d684edd .grid-item img { -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.3s; } .no-touch #collection-5ff60835f2fc6a5e3d684edd .grid-item:hover img,.no-touch #collection-5ff60835f2fc6a5e3d684edd .grid-item:focus img { -webkit-filter: grayscale(0%); filter: grayscale(0%); transition: all 0.3s; } Perfect, thanks very much! Link to comment
AngieRoxyE Posted May 13, 2021 Share Posted May 13, 2021 On 5/1/2021 at 3:01 AM, tuanphan said: It looks like you solved? I just changed the opacity. Was looking for code to make the thumbnail alternate from a black and white image to full color. Link to comment
tuanphan Posted May 14, 2021 Share Posted May 14, 2021 19 hours ago, AngieRoxyE said: I just changed the opacity. Was looking for code to make the thumbnail alternate from a black and white image to full color. Add to Design > Custom CSS a.grid-item img { filter: grayscale(1); } a.grid-item:hover img { filter: grayscale(0); } .portfolio-grid-basic .grid-item:hover .grid-image { opacity: 1; } AngieRoxyE 1 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
Caitlin000 Posted November 30, 2021 Share Posted November 30, 2021 I am using 7.1 is there a way to change the code to work for my site? Thank you! Link to comment
tuanphan Posted December 1, 2021 Share Posted December 1, 2021 19 hours ago, Caitlin000 said: I am using 7.1 is there a way to change the code to work for my site? Thank you! The code is for SS 7.1. Can you share link to page where you want to apply the code? 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
Caitlin000 Posted December 1, 2021 Share Posted December 1, 2021 (edited) yes its www.coraldove.com/journal thank you!! This is the code I used: .no-touch #collection-5eeba9e7b86406138c6ccc45 .grid-item img { -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.3s; } .no-touch #collection-5eeba9e7b86406138c6ccc45 .grid-item:hover img,.no-touch #collection-5eeba9e7b86406138c6ccc45 .grid-item:focus img { -webkit-filter: grayscale(0%); filter: grayscale(0%); transition: all 0.3s; } It is doing something but not turing it greyscale Edited December 1, 2021 by Caitlin000 Link to comment
Beyondspace Posted December 1, 2021 Share Posted December 1, 2021 53 minutes ago, Caitlin000 said: yes its www.coraldove.com/journal thank you!! This is the code I used: .no-touch #collection-5eeba9e7b86406138c6ccc45 .grid-item img { -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.3s; } .no-touch #collection-5eeba9e7b86406138c6ccc45 .grid-item:hover img,.no-touch #collection-5eeba9e7b86406138c6ccc45 .grid-item:focus img { -webkit-filter: grayscale(0%); filter: grayscale(0%); transition: all 0.3s; } It is doing something but not turing it greyscale You can try .blog-basic-grid .image-wrapper img { filter: grayscale(1); transition : filter 800ms linear; } .blog-basic-grid .image-wrapper:hover img { filter: grayscale(0); } Let me know how it works on your site BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Caitlin000 Posted December 1, 2021 Share Posted December 1, 2021 1 hour ago, bangank36 said: You can try .blog-basic-grid .image-wrapper img { filter: grayscale(1); transition : filter 800ms linear; } .blog-basic-grid .image-wrapper:hover img { filter: grayscale(0); } Let me know how it works on your site That worked!! Thank you!! coraldove.com/journal to see it in action!! Thank you so much 🙂 Beyondspace 1 Link to comment
whitneypeper Posted January 6, 2023 Share Posted January 6, 2023 (edited) Hi all! OK - I'm in the newest Squarespace version and trying to do what everyone else is... want my home page gallery to switch to color from b&w (over 1 second). Hoping this applies gloabally to the entire website. Oh - and any specific support around where to implement the CSS would be helpful. I'm just dumping it under "Design" and "Custom CSS." Perhaps I should do it elsewhere? None of the above code sections worked for me. https://colodesignstudio.squarespace.com/ password: belong help would be wildly apprectiated! Edited January 6, 2023 by whitneypeper Link to comment
tuanphan Posted January 8, 2023 Share Posted January 8, 2023 On 1/7/2023 at 3:30 AM, whitneypeper said: Hi all! OK - I'm in the newest Squarespace version and trying to do what everyone else is... want my home page gallery to switch to color from b&w (over 1 second). Hoping this applies gloabally to the entire website. Oh - and any specific support around where to implement the CSS would be helpful. I'm just dumping it under "Design" and "Custom CSS." Perhaps I should do it elsewhere? None of the above code sections worked for me. https://colodesignstudio.squarespace.com/ password: belong help would be wildly apprectiated! I see you solved? 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
rubyforelle Posted March 22, 2023 Share Posted March 22, 2023 Hey there, I've had success doing this with regular image blocks, but can't figure out how to make it happen for this "people" section: https://owl-springtail-bkyf.squarespace.com/landing-page Help is appreciated! Link to comment
tuanphan Posted March 25, 2023 Share Posted March 25, 2023 On 3/23/2023 at 1:43 AM, rubyforelle said: Hey there, I've had success doing this with regular image blocks, but can't figure out how to make it happen for this "people" section: https://owl-springtail-bkyf.squarespace.com/landing-page Help is appreciated! I don't see People section on this page. Can you take a screenshot? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment