neynarhm Posted November 26, 2022 Share 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! Link to comment
Solution Ziggy Posted November 26, 2022 Solution Share 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. tuanphan and neynarhm 2 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
neynarhm Posted November 27, 2022 Author Share 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 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