oneoakbrands Posted January 10, 2023 Share Posted January 10, 2023 Hello everyone! I am attempting to create a zoom effect on an image when the cursor hovers over it. I have actually implemented this in another website, but the same code is not working for the website I am currently customizing. This is the code I am trying to use (for one image block): #block-023806cef06d554ac6aa {img:hover {transform: scale(1.1); transition: .4s;}} Site url: www.lexiezookphotoandfilm.com Site PW: lexiezook Any help would be greatly appreciated! Link to comment
Solution Ziggy Posted January 11, 2023 Solution Share Posted January 11, 2023 Try this Custom CSS: section[data-section-id="63bc7fa08038f94d60e06901"] { .sqs-block-image img { transform: scale(1); transition: 400ms; overflow:hidden !important; } .sqs-block-image:hover img { transform: scale(1.1); transition: 400ms; } } It will apply to the section. You can replace the section with the block if you only want the one image. E-W, addisonpann and Lalat 1 2 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
oneoakbrands Posted January 16, 2023 Author Share Posted January 16, 2023 @Ziggy That worked!!! Thank you so much! Ziggy 1 Link to comment
Ziggy Posted January 17, 2023 Share Posted January 17, 2023 14 hours ago, oneoakbrands said: @Ziggy That worked!!! Thank you so much! Brilliant! Thanks for marking the post as solved, always happy to know it worked for you! 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
oneoakbrands Posted January 18, 2023 Author Share Posted January 18, 2023 @Ziggy Just to follow up on this, I tried using that code and just pasting the block instead of the section and for some reason it doesn't work. It works when it is for the entire section, but not just one singular block. Am I missing something? Here's what I'm using: #block-yui_3_17_2_1_1673622042756_4999 { .sqs-block-image img { transform: scale(1); transition: 400ms; overflow:hidden !important; } .sqs-block-image:hover img { transform: scale(1.1); transition: 400ms; } } Any ideas? Link to comment
Ziggy Posted January 18, 2023 Share Posted January 18, 2023 You'd need to use the fluid engine block ID that begins .fe-block- You can find that by inspecting the element. 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
oneoakbrands Posted January 18, 2023 Author Share Posted January 18, 2023 @Ziggy So is it just the regular block ID with .fe-block- in front? Or is it an entirely different block ID number? Example: if the block ID is #block-yui_3_17_2_1_1673622042756_4999 could I just use: .fe-block-yui_3_17_2_1_1673622042756_4999 ? I usually use the Squarespace ID finder, but I also tried manually inspecting the element and couldn't find anything beginning with .fe-block- The last time I used CSS to target a specific block was before fluid engine existed, so I must be missing something! LOL. Link to comment
Ziggy Posted January 19, 2023 Share Posted January 19, 2023 11 hours ago, oneoakbrands said: So is it just the regular block ID with .fe-block- in front? Yes, it is, as you can see here: The FE-BLOCK ID is one order higher than the "regular" block ID. oneoakbrands 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
ChristinaDean Posted April 3 Share Posted April 3 Can you share the code to do this on the logo in the header/nav bar? Thanks! Link to comment
Ziggy Posted April 3 Share Posted April 3 5 hours ago, ChristinaDean said: Can you share the code to do this on the logo in the header/nav bar? Thanks! Can you share your website URL? 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
ChristinaDean Posted 27 minutes ago Share Posted 27 minutes ago Sure thing! www.sacredtransits.com PW: SACRED I'm also wondering how I can create a zoom effect on hover for all images on this site -- nothing MAJOR, but a subtle expansion effect might be nice. Thanks! 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