Jump to content

Zoom in hover effect

Go to solution Solved by creedon,

Recommended Posts

  • Solution

Add the following to Design > Custom CSS.

.page-section[data-section-id="5f29d4f9942d474f5e29a1d1"] .image-wrapper .image {

  -webkit-transition-duration: 1s;
       -o-transition-duration: 1s;
          transition-duration: 1s;
  
  }

.page-section[data-section-id="5f29d4f9942d474f5e29a1d1"] .image-wrapper .image:hover {

  -webkit-transform: scale( 1.2 );
      -ms-transform: scale( 1.2 );
          transform: scale( 1.2 );
  
  }

The above is for a v7.1 site and the data-section-id is specific to this site.

You can change the transition duration scale value to suit.

Let us know how it goes.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
On 10/9/2020 at 3:08 AM, creedon said:

Add the following to Design > Custom CSS.


.page-section[data-section-id="5f29d4f9942d474f5e29a1d1"] .blog-image-wrapper .image {

  -webkit-transition-duration: 1s;
       -o-transition-duration: 1s;
          transition-duration: 1s;
  
  }

.page-section[data-section-id="5f29d4f9942d474f5e29a1d1"] .blog-image-wrapper .image:hover {

  -webkit-transform: scale( 1.2 );
      -ms-transform: scale( 1.2 );
          transform: scale( 1.2 );
  
  }

The above is for a v7.1 site and the data-section-id is specific to this site.

You can change the transition duration scale value to suit.

Let us know how it goes.

Your code is just..wow!! thank you so much creedon you saved me so much time. I couldn't find a right one on the internet

Link to comment
  • 7 months later...
4 hours ago, hnrytran said:

Hi @creedon Thanks for the code, I used it on mine and it worked nicely! Do you happen to know how to make it works with rounded corner image blocks? 

My image block turns into square corners when its on hover (as shown in the screenshot)268414994_ScreenShot2021-05-24at5_42_23PM.png.ad0b333f490f809d77c9e330b20e37ae.png

Here is the link to the site: https://www.h-tran.com

Thank you in advance!

Seems like you got it solved

image.thumb.png.d0a23871f907f4b5fe3d41761b1bd528.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@hnrytran

It seems that the corners on Safari are a long standing issue when doing transitions/transforms. 😞

Here is some reading.

css3 border radius animation transition in safari not working

Transition on transform with border radius and overflow hidden doesn't work in Safari

Safari border-radius + overflow: hidden + CSS transform fix

I have updated my site wide rounded image corners code with a fix that should work for Safari.

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 months later...

@JakeBillo

The reason is is not working is the provided code is targeting images from a blog not an image block as is your case.

Add the following to Design > Custom CSS.

/*

  begin scale image block with id
  
  Version       : 0.1d0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  Note          : uses LESS syntax
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  #block-75fbe5edb8437e5dc174 {
  
    @scale : 1.2;
    @transition-duration : 1s;
    
    .thumb-image {
    
      -webkit-transition-duration : @transition-duration;
      -o-transition-duration : @transition-duration;
      transition-duration : @transition-duration;
      
      }
      
    &:hover .thumb-image {
    
      -webkit-transform : scale( @scale );
      -ms-transform : scale( @scale );
      transform : scale( @scale );
      
      }
      
    }
    
  /* end scale image block */

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 month later...

@louissmith

Without being able to see your site we really can't answer any of your questions/issues.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 months later...
  • 2 months later...
On 10/8/2020 at 8:08 PM, creedon said:

Add the following to Design > Custom CSS.

.page-section[data-section-id="5f29d4f9942d474f5e29a1d1"] .blog-image-wrapper .image {

  -webkit-transition-duration: 1s;
       -o-transition-duration: 1s;
          transition-duration: 1s;
  
  }

.page-section[data-section-id="5f29d4f9942d474f5e29a1d1"] .blog-image-wrapper .image:hover {

  -webkit-transform: scale( 1.2 );
      -ms-transform: scale( 1.2 );
          transform: scale( 1.2 );
  
  }

The above is for a v7.1 site and the data-section-id is specific to this site.

You can change the transition duration scale value to suit.

Let us know how it goes.

Hi @creedon, I managed to get zoom to work in my galleries but it's zooming straight into the middle. I set the focal points for all of them hoping that it would zoom to them but it didn't work. Do you know of a way of setting up a snippet of css to tell the image to zoom into the focal point on hover? I just took this one from @inside_the_square and it works well but I would like to figure out that extra step if possible. Thank you! 

Here are the lines she shared: 

:hover{height:100%!important; width:100%!important; transform:Scale(2);
overflow:hidden!important; transition-duration:2.5s}
.gallery-masonry-item{overflow:hidden!important}

This is the link to my site in case it's important:

https://www.ericklistman.com

I looked around but: 1) I'm not savvy about where to look and 2) there doesn't seem to be much this specific. It's important for me because if I'm displaying a portrait, I don't want it to zoom into the breasts! I just want to give visitors an idea of what it might look like if they get their portrait painted. Thanks again! Awesome community so far.

Here is a sample with the third image zoomed in, I would like it to zoom into the face instead of the body:

85634073_ScreenShot2022-02-06at21_48_05.png.28a31ab65f6619cdd4716f315aeca594.png

Link to comment

@1_Caveman_Mashing_Buttons-

The focal point feature only has to do with what part of the image to keep visible in particular circumstances. It is not used as a zoom to point.

For the zoom to point you probably want to use something like transform-origin : 50% 15%;

The issue I see is that it is not going to be easy to apply and maintain. You'll have to target different images with different values by position something like .gallery-masonry-item:nth-child( 3 ) img:hover

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
1 hour ago, creedon said:

@1_Caveman_Mashing_Buttons-

The focal point feature only has to do with what part of the image to keep visible in particular circumstances. It is not used as a zoom to point.

For the zoom to point you probably want to use something like transform-origin : 50% 15%;

The issue I see is that it is not going to be easy to apply and maintain. You'll have to target different images with different values by position something like .gallery-masonry-item:nth-child( 3 ) img:hover

You are amazing! Thank you, so simple, so elegant. I adjusted to 13% because most of the images' focal point do fall on the top third so that is good enough to present the important parts. All I wanted was for them not to zoom into a breast because people could see it as distasteful. Thank you for this!!

Link to comment
  • 1 month later...
On 10/8/2020 at 9:08 PM, creedon said:

Add the following to Design > Custom CSS.

.page-section[data-section-id="5f29d4f9942d474f5e29a1d1"] .blog-image-wrapper .image {

  -webkit-transition-duration: 1s;
       -o-transition-duration: 1s;
          transition-duration: 1s;
  
  }

.page-section[data-section-id="5f29d4f9942d474f5e29a1d1"] .blog-image-wrapper .image:hover {

  -webkit-transform: scale( 1.2 );
      -ms-transform: scale( 1.2 );
          transform: scale( 1.2 );
  
  }

The above is for a v7.1 site and the data-section-id is specific to this site.

You can change the transition duration scale value to suit.

Let us know how it goes.

Will this work on a 7.0 site?

Link to comment
On 4/6/2022 at 8:55 AM, wa7245 said:

Will this work on a 7.0 site?

Not as is but it might be adapted to a v7.1 site. Please describe the effect you want to achieve.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Any idea on how to make this code work on my blog page:

 

//Gallery Grid Strips Hover Effects
.gallery-strips-item img{filter:grayscale(100%)}
.gallery-strips-item 

img:hover{filter:grayscale(0%)}

img:hover {transform: scale(1.1); transition: .4s;}

img{transform: scale(1); transition: .4s;}

Link to comment
On 4/9/2022 at 3:44 AM, HunterD said:

Any idea on how to make this code work on my blog page:

 

//Gallery Grid Strips Hover Effects
.gallery-strips-item img{filter:grayscale(100%)}
.gallery-strips-item 

img:hover{filter:grayscale(0%)}

img:hover {transform: scale(1.1); transition: .4s;}

img{transform: scale(1); transition: .4s;}

Can you share link to blog page?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
On 10/9/2020 at 2:08 AM, creedon said:

Add the following to Design > Custom CSS.

.page-section[data-section-id="5f29d4f9942d474f5e29a1d1"] .blog-image-wrapper .image {

  -webkit-transition-duration: 1s;
       -o-transition-duration: 1s;
          transition-duration: 1s;
  
  }

.page-section[data-section-id="5f29d4f9942d474f5e29a1d1"] .blog-image-wrapper .image:hover {

  -webkit-transform: scale( 1.2 );
      -ms-transform: scale( 1.2 );
          transform: scale( 1.2 );
  
  }

The above is for a v7.1 site and the data-section-id is specific to this site.

You can change the transition duration scale value to suit.

Let us know how it goes.

Is anyone able to help me figure out why this isn't working on my site? I've tried replicating this on the homepage with my data-section-id's but had no luck.

www.snowplace.co.uk

@creedon

Edited by petenorman28
Link to comment

Create an account or sign in to comment

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

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