A user applied CSS border-radius to collection list sections, but the rounded corners disappear when hovering triggers an image zoom effect. They’re unable to identify the correct CSS class to maintain the border-radius across all states.
Site Details:
Proposed Solutions:
Two community members offered CSS fixes:
.collection-item__bg with border-radius: 10px 10px 0px 0px !important;.collection-item__image:hover with border-radius: 8px; in theme.cssThe second solution includes a screenshot showing where to paste the code. The issue remains unresolved as the original poster hasn’t confirmed which solution worked.
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
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..
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?
Please use this code instead.
.collection-item__bg { border-radius: 10px 10px 0px 0px !important; }
Hello @mariafy2
.collection-item__image:hover{
border-radius: 8px;
}
