How to add a subtle grey overlay to all product images in featured products and main catalog page?

Store Design
1

Hi,

I’ve successfully added a grey tint to all product photos on their individual product pages following a previous tutorial, but I would like to add the grey tint to all product photos on the main catalog / products page and on the featured products that show on the homepage, can you help?

2

Hello,

If i understand you correctly you mean the product cards on the collection page or in the featured products section.

To applicate such a tint with css you first have to add the tint element to the product card.

go to your theme → edit code → snippets → card-product.liquid

You search for this line of code (if you havent changed a lot its in line 57)

In the next line you add the following div

Then you go to assets/base.css

and add following css at the end:

.card-background-tint{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #060605;
    opacity: 0.7;
    z-index: 1;
}

background and opacity you can change like you want its simply the tint color. If you have a color which has already an opacity just remove the opacity attribute and fill in your color.

Best Regards Erik

3

Hi @Erik_Abrio ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

4

Hi @BSS-Commerce

Thats not my problem, im offering a solution for the dawn theme on this post.

But still thanks for your reply.