How can I add a grey overlay to product photos using CSS in Dawn Theme 10.0?

Store Design
, ,
1

how do i add a grey background to my individual product photos using CSS code. Currently they all have a white background but i want to add a grey overlay on each product photo.

2

Hello @jimmythetulip

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.product-grid__image-wrapper {
  position: relative;
}

.product-grid__image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity and color as desired */
  z-index: 1;
}
3

Im not sure how to do that could you please explain- i added the code but still remains white