How to adjust opacity for sold out items on Impulse theme?

[juneandbeyond]

I want the sold-out items on my collection pages to appear either less opaque or darker so that it is more obvious that the items are sold out. I would also like to make it to where the "Sold Out" button is centered and has a black background with white letters. Can someone help me figure out the correct code to use and where to put it? 

I attached what it currently looks like. I was able to find a forum to help me change the text to be larger and appear red, but would still like it to be more apparent that the items are sold out. I am using the impulse theme

[Made4uo-Ribe]

Hi @juneandbeyond 

Would you mind sharing your store URL? Thanks!

[juneandbeyond]

https://juneandbeyond.com/

Thank you for your help! 

[Made4uo-Ribe · Accepted solution]

Thanks for the info, I can only add the opacity. Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.grid-product__content:has(.grid-product__tag.grid-product__tag--sold-out) {
    opacity: .3;
}

And Save. 

Result:

I add the sold out on the middle. If you like to add them also you can use this code. 

.grid-product__tag.grid-product__tag--sold-out {
    position: absolute;
    top: 40%;
    right: 50%;
    transform: translateX(50%);
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!