How can I add a grey tint overlay to product images in Dawn?

[NH]

Hi There, basically we have cutout images on white and want to add a very small grey tint over the top - rather than changing every image background in photoshop.

My attempts in Dawn have failed, eg for collection pages, "card__inner" looked the perfect div to add a background colour with opacity but it always appears below the product image...? I'm missing something fundimental here...?

Any help much much much appreciated...? Thx

[diego_ezfy]

Hello @NH,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

[NH]

Hi Diego, thx but its not an issue, and its an amend to vanilla Dawn code...? 

[diego_ezfy · Accepted solution]

@NH 

If I understand correctly, depending on what images you have on your store it would require a different approach. 

You can add an overlay to product page images by:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset >base.css and paste this at the bottom of the file:

.product__media-item modal-opener{
    position: relative;
}
.product__media-item modal-opener:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: #000000;
    opacity: 0.2;
}

#000000 = overlay color
0.2 = intensity (from 0 to 1)

Kind regards,
Diego

[NH]

cheers, thx...

[Mohamed_Evisu]

Hello, how can i use this code to make image overlay but conditional not for all products?