neynarhm Posted November 26, 2022 Posted November 26, 2022 Hi fellow Squarespace users, I,d like to get help on setting up a hover effect to this gallery block here on my homepage: https://www.neynarhm.com - What I intend to do upon hovering is either: 1. the image can be darker 2. the image can turn into grayscale, like this one here (but no need to be moved up): https://www.victorberbel.work No 2 is the ideal one, but no 1 only is fine. Anybody knows what I should do on the CSS setup? Thanks for the help!
Solution Ziggy Posted November 26, 2022 Solution Posted November 26, 2022 Try adding this custom CSS: section[data-section-id="63774c57fe920e0a4eed4475"] { .sqs-block-image .design-layout-fluid img { transition:ease-in-out 300ms; &:hover { filter: grayscale(100%); } } } Let me know if that helps, give me a thumbs up if it does. neynarhm and tuanphan 2 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
neynarhm Posted November 27, 2022 Author Posted November 27, 2022 10 hours ago, Ziggy said: Try adding this custom CSS: section[data-section-id="63774c57fe920e0a4eed4475"] { .sqs-block-image .design-layout-fluid img { transition:ease-in-out 300ms; &:hover { filter: grayscale(100%); } } } Let me know if that helps, give me a thumbs up if it does. It works! Thanks Ziggy! Ziggy 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment