Zoom in hover effect

AA95 · October 8, 2020

Hello, I'd like to add a zoom in hover effect to the images on my homepage. How can I do that? Thanks in advance.

www.andreaaronica.com

creedon · October 9, 2020

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 October 28, 2022 by creedon
version 2

AA95 · October 10, 2020

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

hnrytran · May 24, 2021

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)

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

Thank you in advance!

Beyondspace · May 25, 2021

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)

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

Thank you in advance!

Seems like you got it solved

creedon · May 25, 2021

@hnrytran

As bangank36 mentions it's looking good on my end as well.

Are you still having an issue?

Ingrid89 · May 25, 2021

Hi guys, I'm trying to do this with my header photo. I can't get the code to work though.

hnrytran · May 25, 2021

@creedon @bangank36 Thanks for the note. So I just realized that the issue only appear on Safari web browser but not on Chrome. Any idea why that would be?

Thanks!

creedon · May 26, 2021

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

JakeBillo · August 5, 2021

@creedon

I'm having difficulty implementing this code. I'm trying to add a zoom effect to the first image on my homepage. Code doesn't show any errors but it just doesn't change anything. I've changed the data-section-id to the section which i want to change on my site. Any ideas?

Site:

https://www.jayleeoak.co.uk/

creedon · August 6, 2021

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

JakeBillo · August 10, 2021

Thanks very much @creedon . Works great.

louissmith · September 10, 2021

Hiya,

I'm also trying to do this. But on a list block - is that possible? It's a carousel of scrolling images. (I would share URL but still currently a trial. I'm also unsure as to which ID I should be copying and pasting from inspect - there seems to be a lot!

creedon · September 10, 2021

@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 February 7, 2022 by creedon

evelynbrq · November 22, 2021

Hi there, I'm trying to get this to work as well but can't seem to figure it out. I've added the code and changed the section-id but it doesn't seem to have changed anything. Here is my website: https://pike-elephant-2w4w.squarespace.com/

Thanks in advance.

creedon · November 22, 2021

@evelynbrq

Please set up a site-wide password.

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.

We can then take a look at your issue.

1_Caveman_Mashing_Buttons- · February 7, 2022

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:

creedon · February 8, 2022

@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

1_Caveman_Mashing_Buttons- · February 8, 2022

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

wa7245 · April 6, 2022

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?

creedon · April 6, 2022

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 April 8, 2022 by creedon

HunterD · April 8, 2022

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

tuanphan · April 10, 2022

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?

petenorman28 · August 3, 2022

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 August 3, 2022 by petenorman28

creedon · August 3, 2022

13 minutes ago, petenorman28 said:

Is anyone able to help me

Site-wide password?

Zoom in hover effect

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

creedon

creedon

creedon

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources