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

[itspriyanka]

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

Best regards,

Priyanka