Jump to content
Go to solution Solved by Ziggy,

Recommended Posts

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

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.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@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

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 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@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
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:

image.thumb.png.56f86108f9746e0e90677e8d4e8ebb39.png

The FE-BLOCK ID is one order higher than the "regular" block ID.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 1 year later...
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 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 4 weeks later...

You can try this code to start with:

.header-title-logo img {
  transform: scale(0.9);
  transition: 400ms;
  overflow:hidden !important;
}
.header-title-logo img {
  transform: scale(1.0); 
  transition: 400ms; 
}

By removing ".header-title-logo" you can apply this to every image, but that might not be a brilliant solution and you may have to tweak the scale property.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 4/26/2024 at 3:21 AM, Ziggy said:

You can try this code to start with:

.header-title-logo img {
  transform: scale(0.9);
  transition: 400ms;
  overflow:hidden !important;
}
.header-title-logo img {
  transform: scale(1.0); 
  transition: 400ms; 
}

By removing ".header-title-logo" you can apply this to every image, but that might not be a brilliant solution and you may have to tweak the scale property.

im trying to apply this to the header, but it didn't do anything except scale my logo from the first half of the code. I'm still a complete novice to coding, but shouldn't i expect a ":hover:after " kinda thing somewhere to force it to wait for hover? or am I completely off-base here?

Link to comment
On 4/29/2024 at 8:31 AM, LeauxFi said:

im trying to apply this to the header, but it didn't do anything except scale my logo from the first half of the code. I'm still a complete novice to coding, but shouldn't i expect a ":hover:after " kinda thing somewhere to force it to wait for hover? or am I completely off-base here?

What is site url? We can check your problem easier

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
Posted (edited)
14 hours ago, tuanphan said:

You can use this CSS code

div.header-title-logo a:hover img {
    transform: scale(1.3);
    transition: all 0.3s;
}
div.header-title-logo a img {
    transition: all 0.3s;
}

I seeeeeee and this worked perfectly. So I didn't understand the class to select either. I went ahead and added @media screen and (min-width: 800px) as well

 

Looks like I need to REALLY learn when to use "div.whatever" vs  ".whatever" vs "#blockwhatever" vs "fe-block-whatever" Thank you so much as always friend.  Thanks to both you AND @Ziggy

Edited by LeauxFi
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.