Jump to content

Image hover effect

Go to solution Solved by Ziggy,

Recommended Posts

Hi,

I am trying to add a hover effect to a single image (.sqs-block-image) using custom CSS, but when I add this code from a previous question -

section[data-section-id="fe-block-yui_3_17_2_1_1716479509671_30499"] {
  .sqs-block-image img {
    transform: scale(1);
    transition: 400ms;
    overflow:hidden !important;
  }
  .sqs-block-image:hover img {
     transform: scale(1.1); 
     transition: 400ms; 
  }
}

nothing happens. I am using the id="fe-block..."  but am I missing a line of code or something?

Link to comment
  • Solution

It looks like you and mixing together the block ID and section ID. Adding the block ID as the data-section-id won't work. Try just using the block ID. Perhaps like this:

.fe-block-yui_3_17_2_1_1716479509671_30499 {
  .sqs-block-image img {
    transform: scale(1);
    transition: 400ms;
    overflow:hidden !important;
  }
  .sqs-block-image:hover img {
     transform: scale(1.1); 
     transition: 400ms; 
  }
}

 

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
Posted (edited)

@Ziggy Hopefully you can help me! I want to have a hover effect (on an image block) with text on it. I can't figure it out how to get this done...

I want for the desktop version every image a different hover title (with the background been blurred, slightly darker, as my example shows).

I can't seem to figure out to get an easy en nice result for this.. also tips are welcome to have this in some way working for mobile, since there is no hover over possibilities. 

URL: https://seabass-lute-8mzg.squarespace.com
PS: Bert

Thanks in advance!

Edited by aestetik_studio
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.