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

Zoom in hover effect


AA95

Question

13 answers to this question

Recommended Posts

  • 0

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.

Edited by creedon
updated CSS with vendor prefixes

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

Link to comment
  • 0
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
  • 0
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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0

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

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

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!

Link to comment
  • 0

@louissmith

Without begin 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

Create an account or sign in to comment

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

×
×
  • Create New...