Code won't work unless i click edit

Site URL: https://upstatelandservices.squarespace.com/about-us

The image hover code i have on this page is suppose to scale up within it's boundaries but it will only do that once I click "edit page"

https://upstatelandservices.squarespace.com/about-us

password: landscape

Here is the code:

.sqs-block-image img {
  transform: scale(1) !important;
  transition: all ease-in-out 1s !important;
}

.sqs-block-image:hover img {
  transform: scale(1.1) !important;
  transition: all ease-in-out 1s !important;
}

AJAX Loading has been and is currently offf

Its working, the images are zooming in for me. 

This video explains my issue better. You'll see once I click edit the hover style changes to the way it is suppose to be. I've cleared my cache and I am seeing the same issue in firefox which I never use and has a completely cleared cache as well.

Add this new code

.sqs-block-image img {
  -webkit-transform: scale(1) !important;
      -ms-transform: scale(1) !important;
          transform: scale(1) !important;
  -webkit-transition: all ease-in-out 1s !important;
  -o-transition: all ease-in-out 1s !important;
  transition: all ease-in-out 1s !important;
}
.image-inset {
    overflow: hidden;
}
.sqs-block-image:hover img {
  -webkit-transform: scale(1.1) !important;
      -ms-transform: scale(1.1) !important;
          transform: scale(1.1) !important;
  -webkit-transition: all ease-in-out 1s !important;
  -o-transition: all ease-in-out 1s !important;
  transition: all ease-in-out 1s !important;
}

14 hours ago, tuanphan said:

Add this new code

.sqs-block-image img {
  -webkit-transform: scale(1) !important;
      -ms-transform: scale(1) !important;
          transform: scale(1) !important;
  -webkit-transition: all ease-in-out 1s !important;
  -o-transition: all ease-in-out 1s !important;
  transition: all ease-in-out 1s !important;
}
.image-inset {
    overflow: hidden;
}
.sqs-block-image:hover img {
  -webkit-transform: scale(1.1) !important;
      -ms-transform: scale(1.1) !important;
          transform: scale(1.1) !important;
  -webkit-transition: all ease-in-out 1s !important;
  -o-transition: all ease-in-out 1s !important;
  transition: all ease-in-out 1s !important;
}

 

That worked! Thank you!! 

So the solution was to incorporate the browser support?

On 2/19/2021 at 11:51 PM, GarciaVisuals said:

That worked! Thank you!! 

So the solution was to incorporate the browser support?

no =))) You see this new code in above code

.image-inset {
    overflow: hidden;
}

Also, I added some prefix for enture it works on all browsers/devices