Hover effect on Product images

Site URL: https://antelope-octagon-t69s.squarespace.com/

Hey there! 🙂

Im trying to apply this hover effect onto my Shop Product images - Screen-recording attached.

The CSS hover effect is working on my Roots BIO images, but not working on my Product images. 

Homepage - https://antelope-octagon-t69s.squarespace.com/  - not working 

Our Roots - https://antelope-octagon-t69s.squarespace.com/our-roots working. 

Any help would be much appreciated. 

a img.thumb-image
 {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
           transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
       -moz-osx-font-smoothing: grayscale;
   -webkit-transition-duration: 0.5s;
           transition-duration: 0.5s;
   -webkit-transition-property: transform;
           transition-property: transform;
 }
 a img.thumb-image:hover,
 a img.thumb-image:active {
   -webkit-transform: scale(1.1);
           transform: scale(1.1);
 }

Password: Fostex1722!

Many Thanks,

Oliver

@obourne1016 Adding this CSS should give you what you need:

.product-block .image-container a {
  overflow: hidden;
}

.product-block .image-container a:hover img,
.product-block .image-container a:focus img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.product-block .image-container img {
  -webkit-transform: translateZ(0);
           transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
       -moz-osx-font-smoothing: grayscale;
   -webkit-transition-duration: 0.5s;
           transition-duration: 0.5s;
   -webkit-transition-property: transform;
           transition-property: transform;
}

Awesome thanks @jpeter!