obourne1016 Posted May 28, 2020 Share Posted May 28, 2020 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  Hover.mp4 Link to comment
jpeter Posted May 29, 2020 Share Posted May 29, 2020 @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
obourne1016 Posted May 29, 2020 Author Share Posted May 29, 2020 Awesome thanks @jpeter! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.