ivyshi Posted February 28, 2023 Share Posted February 28, 2023 Hello.https://rabbit-vibraphone-s7s3.squarespace.com/projects I'd like to add a hover -zoom in effect to the portfolio page. I know the section Id is section[data-section-id="6284bbaddf5a4852c649ea1b"] and the collection id is #collection-6284bbaddf5a4852c649ea0c Does that help in any way? I'd really like to put up the cool zoom in effect, thank you! Link to comment
Solution Ziggy Posted February 28, 2023 Solution Share Posted February 28, 2023 Try this Custom CSS: #collection-6284bbaddf5a4852c649ea0c { .blog-basic-grid .image-wrapper:hover img { transform: scale(1.2); } } Hope that helps! ivyshi 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
ivyshi Posted March 1, 2023 Author Share Posted March 1, 2023 Thanks! #collection-6284bbaddf5a4852c649ea0c { .blog-basic-grid .image-wrapper:hover img:hover {transform: scale(1.1); transition: .4s;} img{transform: scale(1); transition: .4s;} } I changed it up a bit to add a smoother zoom in - so your answer was the perfect building block! Thank you so much! Link to comment
Ziggy Posted March 1, 2023 Share Posted March 1, 2023 4 hours ago, ivyshi said: perfect building block That's excellent! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 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