How to reduce opacity of sold out product without hovering in collections page ?? (debut theme)

[sel9]

Hello there, I need to reduce the opacity of  the sold out products without having to hover over those products in debut theme, please help?

[w3trends]

You can add the following to your themes stylesheet to change the opacity for sold out products:

.grid-view-item--sold-out{
opacity: 0.5!important;
}

[sel9]

Hello there,

I succeeded in reducing the  opacity for the sold out products but i ended up reducing the opacity of the sold out badge too!! i dont want to reduce the opacity of the sold out badge..  what should i do?

[volantben]

Hi, i'm using the debut theme and i want too reducing the opacity for all the solde out products in the list and grid. Can you telle me where i have to put the code for that ?

[emmebom99]

just put this in the bottom of theme.scss.liquid

.grid-view-item--sold-out .grid-view-item__image {
    opacity: 0.5;
}

[emmebom99]

this code is only working on products that I have no variants on, I have changed my code so that all variants shows up as different products in collections, now I want this opacity overlay on all variants that go out of stock. 

someone that can help me?