Jump to content

Rounding Corners after adding hover & zoom effect

Recommended Posts

On 4/14/2022 at 1:10 AM, DiegoV said:

Site URL: https://lavender-reed-zlpx.squarespace.com/

Hi, 

I have managed to round the corners in my list section using the following code: 

.list-item .list-image  {    border-radius: 12px;    }

 

However because I have a zoom on hover effect over the images when you do hover it zooms in and doesn't have the rounded corners anymore. Any way to fix this?

Screen Recording 2022-04-13 at 19.10.00.mov 1.16 MB · 4 downloads

Your site is private now, kindly set it a protected password so we can take a look

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...
On 4/16/2022 at 9:39 PM, bangank36 said:

Your site is private now, kindly set it a protected password so we can take a look

Hi! 

I'm having this same issue, curious if any solutions are out there

I used Squarespace design built in tools to add the corner radius on this image, but im loosing the rounded corners while hovering over the image in Safari, most likely due to the Zoom in effects I added in the CSS. 

Here is the Zoom in code that I think is causing the corners to disappear on line 383 of my CSS. 

/// POSTER BLOCK IMAGE HOVER ZOOM ///
section[data-section-id="624219730c03d07a5c1c6030"]
.image-block img {
  transform:scale(1.1);
  transition: all 1.3s;
  z-index:1}
section[data-section-id="624219730c03d07a5c1c6030"]
 .sqs-block-image:hover img {transform:scale(1.3);
  transition: 18s;
}


Website is liammccullough.ca
password is: Cozmox

ezgif.com-gif-maker-3.gif

Link to comment
On 6/5/2022 at 7:46 AM, liammccullough said:

Hi! 

I'm having this same issue, curious if any solutions are out there

I used Squarespace design built in tools to add the corner radius on this image, but im loosing the rounded corners while hovering over the image in Safari, most likely due to the Zoom in effects I added in the CSS. 

Here is the Zoom in code that I think is causing the corners to disappear on line 383 of my CSS. 

/// POSTER BLOCK IMAGE HOVER ZOOM ///
section[data-section-id="624219730c03d07a5c1c6030"]
.image-block img {
  transform:scale(1.1);
  transition: all 1.3s;
  z-index:1}
section[data-section-id="624219730c03d07a5c1c6030"]
 .sqs-block-image:hover img {transform:scale(1.3);
  transition: 18s;
}

 


Website is liammccullough.ca
password is: Cozmox

ezgif.com-gif-maker-3.gif

Have you found a solution yet?

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 weeks later...
On 6/10/2022 at 9:43 AM, tuanphan said:

Have you found a solution yet?

I would love a solution to this please if you could help!

My site is https://www.danaenestorides.com and I have a section with 4 image blocks. I've been trying to get these to grow on hover (with the image not being restricted to the original image borders) i.e. like the ones in  this website: https://www.melvindinata.com

I am also having the same problem where my image block rounded corners change to square corners on hover. 

 

Thanks in advance!

Link to comment
7 hours ago, dnesto13 said:

I would love a solution to this please if you could help!

My site is https://www.danaenestorides.com and I have a section with 4 image blocks. I've been trying to get these to grow on hover (with the image not being restricted to the original image borders) i.e. like the ones in  this website: https://www.melvindinata.com

I am also having the same problem where my image block rounded corners change to square corners on hover. 

 

Thanks in advance!

It looks like you figured it out?

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
7 hours ago, dnesto13 said:

I've been trying to get these to grow on hover (with the image not being restricted to the original image borders)

Replace, make copy somewhere, your CSS for this effect with the following.

.sqs-block-image {

  transition : 0.25s;
  
  }

.sqs-block-image:hover {

  transform : scale( 1.05 );
  transition : 1s;
  z-index : 1;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.