Add a custom gradient overlay to Dawn slideshow

[ClearP]

Hi

I’ve been trying to add a custom overlay to the slideshow on my homepage, I have the following code:

background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);

However I am struggling to find where to place this.

The best place so far has been in the “SECTION-IMAGE-BANNER.css” file under the .banner__content section, but this leaves a gap at the side when viewing the site on a certain screen size.

The other option was to place it in the .banner::after, .banner__media::after section. This removes the gap - but it only shows the overlay on the first slide, not the rest.

Please can I get some suggestions on this one?

Thanks in advance.

D

[GemPages]

Hello @ClearP

I would like to give you a solution to support you.

You can add the below code at the end of the “SECTION-IMAGE-BANNER.css” file. https://prnt.sc/qXhYG06Ue2ly

.banner__media::after{
   background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
}

Then, set the image overlay opacity to 100% for each Image slide.

(Note that each Image slide has its own settings)

Best regards,
GemPages Support Team