Rounding Corners after adding hover & zoom effect

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?

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

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

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

Have you found a solution yet?

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!

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?

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.