Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
teeshasavvy

CSS Image Grow on Hover

Question

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/

 

 

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
  • 0
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.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...