How to change the Image Overlay Opacity color on Slideshow? (Shopify Dawn)

[pktmrkt]

Hoping someone can help as I can't seem to find this answer anywhere.

I am trying to change the "Image Overlay Opacity" from black to white on my Slideshow, as the black overlay makes my images appear too dark. 

Does anyone know if there is code I can add to the Custom CSS field for that section to achieve this?

[DaisyVo]

Hi @pktmrkt 

Please share your store URL so I can take a closer look

Best,

Daisy

[pktmrkt]

Hi Daisy, URL is https://pktmrkt.com/

Thank you!

[DaisyVo]

Hi @pktmrkt 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.banner:after, .banner__media:after {
    background: transparent !important;
}

Here is the result: 

I hope this helps

Best,

Daisy

[pktmrkt · Accepted solution]

Hi Daisy, 

Thank you for the code. I had to change it a bit to get the results I wanted but it worked. It works with the slider in theme as well!

.banner:after,
.banner__media:after {
  background: white !important;
}

[DaisyVo]

Hi @pktmrkt 

It's great to hear that! I originally set the color to white, and you changed it to transparent, correct? I'm glad to know it worked and resolved your issue.

If our answer was helpful, please mark it as the solution and give it a like—I would really appreciate it!

Best,

Daisy