Product Grid Hover Image Border Radius CSS

Hi there,

I have added a border-radius to my product grid but am having an issue where the border-radius changes on Hover. I have attached a video showing this issue. Could you guys kindly provide the CSS code to ensure the border-radius stays the same even on hover?

For your reference, the code which I added for the product grid image is:

.product-grid-item img {
border-radius: 15px !important;
}

Thank you very much!

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.product-grid-item:hover .product-element-top {
border-radius: 15px !important;
}
.product-grid-item .product-wrapper {
border-radius: 15px !important;
}
.product-grid-item:hover .hover-img {
border-radius: 15px !important;
}
.product-grid-item {
border-radius: 15px !important;
}

Best Regards

Hi there,

Thanks for the quick response. I have added the CSS and the border-radius is now showing on hover. However, there is an issue where the square edges can still be seen when hovering out of the product image. I have attached a video showing the issue.

Could you kindly provide me with the CSS to fix this issue? Thank you very much!

Attachments:

You must be logged in to view attached files.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

Hello,

I have inserted my site admin access. I have added the CSS code provided under Theme Settings > Custom CSS > Global, you may find it there.

Thank you so much for your assistance, I really appreciate it!

Hello,

Please replace the custom CSS with this one:

.wd-hover-icons .product-element-top {
	border-radius: 30px;
}

If you have any questions please feel free to contact us.

Best Regards

Hi there,

I have tested the code and it works perfect. Thank you very much for solving my issue once again!

Best Regards

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts