Bringing a scaled image to the front on hover

Site URL: https://okra-perch-nget.squarespace.com/

I'm trying to use css to create an effect so that when you hover over the images in a section, each image scales up with a drop shadow so it looks like it comes forward. The images are close together so when they scale, I want the hovered image to always be in the front so it is stacked above the images it is next to as it's hovered over. I found information about changing the z-index to a low number and then changing it to a higher number upon hover (which I did in the code I'm using). But maybe something is overriding this because still only one image will actually come forward above the others. The code I am using is listed below. Any help would be greatly appreciated!

Code:

section[data-section-id="67028027e84796476b768b81"] {
  .sqs-block-image {
  transform:scale(1);
  transition:ease-in-out 500ms;
  opacity:.65;
  z-index: 1;
  position: relative;  

  &:hover {
    transform:scale(1.1);
     -o-transition:.3s;
  -ms-transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  transition:.3s;
  opacity:1;
  box-shadow: 7px 7px 30px #000000;
  z-index: 1000;
  }
}
}

Your site is private, we can't access it. You can follow this

@tuanphan Sorry about that.

URL: https://okra-perch-nget.squarespace.com/

Password is squarespace1

I've attached a screenshot of the issue in the section below. You can see that when the image of Zeus is hovered over, it's edges on the left and right aren't above the images on either side.

You can use this extra CSS code

section[data-section-id="67028027e84796476b768b81"] .fe-block:hover {
    z-index: 999999999;
}

@tuanphan THANK YOU!