CSS Image Grow on Hover

I have previously used the code on another clients website to have the images grow on hover as per this article: https://www.pareto-design.com/the-blog/2016/4/19/squarespace-thumbnail-image-hover-effects

However, when I apply to a site I'm building now in 7.1 it doesn't seem to work - I'm looking at doing it for the top 6 circle icons on this page here: https://www.brewtown.co.nz/

On 12/18/2019 at 7:57 AM, teeshasavvy said:

 

 

 

@teeshasavvy Have you solved yet? If no, i can take a look.

Hi @tuanphan no I haven't yet 🙂

6 hours ago, teeshasavvy said:

Hi @tuanphan no I haven't yet 🙂

maybe missing class, try using this class name

div#page-section-5d6d8aa2666cc1000133a94b .sqs-block-image img:hover

@tuanphan Hi! I'm also having this issue, i have this "zoom hover effect" code that seems to work in all versions of Squarespace before 7.1 but does not work on my site

<style>
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.3s;
         transition-duration: 0.3s;
 -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);
}
</style>

On 1/7/2020 at 9:53 AM, AMooseJust said:

@tuanphan Hi! I'm also having this issue, i have this "zoom hover effect" code that seems to work in all versions of Squarespace before 7.1 but does not work on my site

 

<style>
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.3s;
         transition-duration: 0.3s;
 -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);
}
</style>

Hi. Difficult to help without site url. Each template/block/section will need different code.