change opacity % of collection list on the home page

[petitlaurierco]

Hello. I was able to change the color behind my image for the collection list with this code :

.collection-grid-item__title-wrapper::before {background-color: #EFE6DD;}

But it is way too light :

is there a way that the opacity be less so that the original color of the photo shows more ?

Thank you!

[AvadaCommerce]

Hi @petitlaurierco ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

[petitlaurierco]

@AvadaCommerce

thank you for replying

https://petitlaurierco123.myshopify.com/

password : towpri

looking forward to hearing back from you

[yocave]

Hi @petitlaurierco

Try this..In exactly that class just set this

background-color:rgba(0,0,0,0.1);

[AvadaCommerce]

Hi @petitlaurierco ,

You try:

.collection-grid-item__title-wrapper::before {
   background-color: #EFE6DD; 
   opacity: 30%;
}

NOTE: You can increase or decrease the opacity value as you like. value opacity from 0 to 100%.

I hope it would help you

[petitlaurierco]

Hello @AvadaCommerce

it worked for the image thank you ! but when you hover over the picture, the hover color is still too bright (the picture disapear too much). I would like to less hovered. I would like it to just change color a bit but still see alot of the picture when you hover on it. can you also advise please:

thank you in advance.

[AvadaCommerce]

Hi @petitlaurierco ,

You try:

.collection-grid-item__link:hover .collection-grid-item__title-wrapper::before {
    background: #000000;
    opacity: 10%;
}

NOTE: You can change the hex code color and value opacity.

[petitlaurierco]

thank you !