Jump to content

My CSS stopped working after using "site styles".

Recommended Posts

Hello, 

I've been using CSS to enlarge and brighten images on hover. Worked like a charm for several months until today when I clicked on "site styles" - the CSS works only when I'm in the "site styles" now and does not work when I save it. (Did not happen before when I was in "site styles" - as usual Squarespace did same changes and it stopped working.)

here's an example of the CSS code:

-------------------------------------------------

#block-yui_3_17_2_1_1654440361834_50510
{img: hover {transform: scale(1.05); transition: 1.5s;}
 img {transform: scale(1.0); transition: 1.2s;}
 img: hover {-webkit-filter: brightness(110%);}
div {overflow:visible!important}}

-------------------------------------------------

Any help what to do?

Thank you!

Edited by MKEQ
spelling mistake
Link to comment
  • Replies 8
  • Views 430
  • Created
  • Last Reply

Top Posters In This Topic

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
19 minutes ago, MKEQ said:

I thought it would show up since there's a specific line for that but I guess not.

It doesn't come through, it is absolutely not clear, not your fault.

Try this re-working of your CSS:

#block-yui_3_17_2_1_1654440361834_50510 img {
  transform: scale(1.0); 
  transition:ease-in-out 1.2s;
}
#block-yui_3_17_2_1_1654440361834_50510 img:hover {
    transform: scale(1.05); 
    transition: ease-in-out 1.5s;
    -webkit-filter: brightness(110%);
  }  
}
#block-yui_3_17_2_1_1654440361834_50510 div {
  overflow:visible!important;
}

 

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 3/16/2023 at 1:11 PM, Ziggy said:

It doesn't come through, it is absolutely not clear, not your fault.

Try this re-working of your CSS:

#block-yui_3_17_2_1_1654440361834_50510 img {
  transform: scale(1.0); 
  transition:ease-in-out 1.2s;
}
#block-yui_3_17_2_1_1654440361834_50510 img:hover {
    transform: scale(1.05); 
    transition: ease-in-out 1.5s;
    -webkit-filter: brightness(110%);
  }  
}
#block-yui_3_17_2_1_1654440361834_50510 div {
  overflow:visible!important;
}

 

Hi, unfortunately does not seem to work.

Link to comment
On 3/18/2023 at 11:13 PM, MKEQ said:

Hi, unfortunately does not seem to work.

Use this new code

#block-yui_3_17_2_1_1654440361834_50510 img {
    transform: scale(1);
    transition: ease-in-out 1.2s;
}

#block-yui_3_17_2_1_1654440361834_50510:hover img {
    transform: scale(1.05);
    transition: ease-in-out 1.5s;
    -webkit-filter: brightness(110%);
}

 

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
  • 2 weeks later...
On 3/20/2023 at 1:08 AM, tuanphan said:

Use this new code

#block-yui_3_17_2_1_1654440361834_50510 img {
    transform: scale(1);
    transition: ease-in-out 1.2s;
}

#block-yui_3_17_2_1_1654440361834_50510:hover img {
    transform: scale(1.05);
    transition: ease-in-out 1.5s;
    -webkit-filter: brightness(110%);
}

Hello, this works thank you. But it's missing the div {overflow:visible!important} so when it scales in it's cut at the edges and I want to prevent that.  How to add that in correct form?

Edited by MKEQ
Link to comment
On 3/28/2023 at 10:32 PM, MKEQ said:

Hello, this works thank you. But it's missing the div {overflow:visible!important} so when it scales in it's cut at the edges and I want to prevent that.  How to add that in correct form?

Which page are you referring to? I need to check some ids

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

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.