Jump to content

Custom CSS not working once site is published

Go to solution Solved by creedon,

Recommended Posts

I added some code to the page I shared in the site URL and when the site is in editing mode it works perfectly but once I published the page, the images began to expand beyond the block even though it should be hidden. Any help would be greatly appreciated. Here is the code: 

<style>.fluid-image-container.sqs-image-content:hover{transform: scale(1.1); transition: .4s;}
img{transform: scale(1); transition: .4s;}
.fluid-image-container.sqs-image-content{overflow:hidden!important;}

.fluid-image-container.sqs-image-content:hover{background:blue!important;opacity:0.5; transition: .4s}


.fluid-image-container.sqs-image-content {opacity:1;
  transition: .4s}

a {
text-decoration: none !important;
}</style>

 

Edited by rpzn6171
Link to comment

I suspect that the issue you are seeing has to do with the editor is adding extra elements to the html. Those elements are providing a container so the images don't scale where you don't want them to.

Try the following.

<style>

  .sqs-block-image .design-layout-fluid .fluid-image-container .content-fill img {
  
    transition : 0.4s;
    
    }
    
  .sqs-block-image:hover .design-layout-fluid .fluid-image-container .content-fill img {
  
    opacity : 0.5;
    transform : scale( 1.1 );
    
    }
    
  </style>

As far as I could tell the blue color was having no effect. Keeping in mind that I was viewing your site from an outside perspective.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hi @creedon , so I added the code and it didn't do anything for the expanding of the images but it did make the color blue (which I then changed to black). 

Any other thoughts why this might be? 

 

<style>.fluid-image-container.sqs-image-content:hover{transform: scale(1.1); transition: .4s;}
img{transform: scale(1); transition: .4s;}
.fluid-image-container.sqs-image-content{overflow:hidden!important;}

.fluid-image-container.sqs-image-content:hover{background:black!important;opacity:0.5; transition: .4s}


.fluid-image-container.sqs-image-content {opacity:1;
  transition: .4s}

a {
text-decoration: none !important;
}</style>

<style>

  .sqs-block-image .design-layout-fluid .fluid-image-container .content-fill img {
  
    transition : 0.4s;
    
    }
    
  .sqs-block-image:hover .design-layout-fluid .fluid-image-container .content-fill img {
  
    opacity : 0.5;
    transform : scale( 1.1 );
    
    }
    
  </style>

Thanks for your help!

Link to comment
  • Solution
Quote

so I added the code and it didn't do anything for the expanding of the images but it did make the color blue

Did you remove, make a copy somewhere, your version of the effect when you installed my code?

 

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Quote

Just curious, do you know of a simple code that would allow the hover effect to remain even as the mouse hovers over the text? 

Hmmm. As far as I can tell, Fluid Engine makes this much more difficult than would have been with Classic Editor.

In FE the image block and text block are separate elements and you have no reliable way to relate to the two elements to each other. With CE the image block had various styles such as overlay, so the image and text were one unit that could be addresses with CSS.

I'm not really a fan of FE for most applications but perhaps someone more familiar with it can offer some help.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.