Jump to content

Hover effect on Product images

Recommended Posts

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 Rootshttps://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

 

Link to comment
  • Replies 2
  • Created
  • Last Reply

@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;
}

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.