need help with css

[itspriyanka]

Hi,

I am using Prestige theme and I am trying to add a custom badge "Ready to Ship" based on a variant metafield. I am able to do that by adding code in product-card.liquid and css in theme.css. However, when I hover over the product image and the product image changes to 2nd one; the tag becomes white. I am not able to figure out how ensure this does not happen. Sharing a recording of the behaviour right now (cannot share the website link, the client is not ok with that at this stage): https://www.awesomescreenshot.com/video/34605457?key=7685355cb9d7be007c6835da85c9ade6

This is the CSS I am using:

.main-rts {
display: flex;
justify-content: space-between;
text-align: center;
align-items: center;
flex-wrap: wrap;
position: absolute;
width: 310px;
}
.main-rts img {
width: 25px;
margin-bottom: 3px;
}
.variant__description {
width: 39px;
margin-right: 5px;
}
.SizeSwatchList.HorizontalList.HorizontalList--spacingTight {
margin-top: 30px;
}
.rts {
position: absolute;
top: 7px;
right: -7px;
}

And this is the code:

{%- if tag contains 'Ready To Ship' -%}
<span class="rts"><img src="https://cdn.shopify.com/s/files/1/1993/9477/files/New_Project_27_50x.png?v=1649828527"></span>
{%- break -%}
{%- endif -%}

Appreciate any help.

Thanks,

Priyanka

[rifat_Shop · Accepted solution]

It seems that the badge is inheriting some styles or behavior when the product image changes. This likely happens because the hover state modifies the product image container or overlays elements in a way that affects the badge.

Here's how you can resolve this issue:

CSS Fix

1. Ensure the Badge Stays on Top
   Add a z-index to the .rts class to ensure it remains visible above all other elements.

   css

   Copy code

   .rts { position: absolute; top: 7px; right: -7px; z-index: 10; }

2. Add Background or Reset Inherited Styles
   If the badge appears white due to inheritance or background issues, explicitly set its background or color:

   css

   Copy code

   .rts { background-color: transparent; /* Or a specific color */ pointer-events: none; /* Prevent it from being interacted with */ }

3. Prevent Badge from Being Affected by Hover State
   Modify the hover state to ensure the badge remains unaffected. For instance, if .product-card or equivalent is the hover target, make sure .rts isn't styled indirectly:

   css

   Copy code

   .product-card:hover .rts { background-color: transparent; }

---

Code Fix

Ensure that the badge is applied outside of the element that changes on hover (like the image container). You can place it directly inside the product card but outside the image wrapper.

For example:

liquid

Copy code

<div class="product-card"> <div class="product-image-wrapper"> <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}"> <!-- Other images or hover effects --> </div> <span class="rts"> <img src="https://cdn.shopify.com/s/files/1/1993/9477/files/New_Project_27_50x.png?v=1649828527"> </span> </div>

This ensures the .rts span isn't directly influenced by the hover effects on the .product-image-wrapper.

Debugging Steps

• Inspect the hover state in your browser's developer tools to see what CSS properties are changing when the image changes.
• Check if any JavaScript is manipulating the badge during the hover event.

Let me know if the issue persists or if you need further guidance!

[itspriyanka]

Thanks @rifat_Shop . Adding the z-index solved the issue. Thanks for the detailed explanation 🙂

Best regards,

Priyanka