Custom CSS not working once site is published

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>

I don't see a site URL.

@creedon Yeah I'm not sure why it isn't showing up. Here it is: https://www.thesqinstitute.com/interactive-labs

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.

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!

@creedon That worked! Thank you so much!

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?  

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.