Retaining border radius on image zoom

[mariafy2]

Hi, 

I used CSS to add a border-radius to my collection list sections, however, when I hover over them, there's an image zoom and the assigned border-radius disappears. I can't seem to find the correct class to assign the radius to so it stays in all states.

site: dragonsdenhawaii.myshopify.com

pw: dragon

[mariafy2]

Yes, let me know what you need. You should be able to view the code by inspecting the element. I was just struggling to find the class to target.

Thanks for letting me know..

[mariafy2]

Here's the website & password:

site: dragonsdenhawaii.myshopify.com

pw: dragon

Unfortunately, I can't provide a collaborator code. Are you able to review by inspecting the site?

[Dan-From-Ryviu]

Please use this code instead. 

.collection-item__bg { border-radius: 10px 10px 0px 0px !important; }

[devcoders · Accepted solution]

Hello @mariafy2 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.collection-item__image:hover{
    border-radius: 8px;
}