How to set class .slideshow__overlay with a delay?

Claes
Tourist
8 1 5

Im using the Brooklyn theme and I have a slidshow in it with a slideshow overlay that is black with a 0.25 opacity so it looks grey.

This shows before the images is loaded and I wonder if I somehow can add the overlay css after the images has loaded?

So the overlay is not showed as a grey background when the page loads.

Thanks.

Pallavi
Shopify Expert
2213 362 473

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Claes
Tourist
8 1 5

Hi

Ok thanks, its https://storyandreels.com 

 

This is what it looks like on the computer when the page first loads. 

Im using a different slideshow in mobile where I don´t have a overlay, so look on the computer

Skärmavbild 2021-06-25 kl. 09.34.24.png

Pallavi
Shopify Expert
2213 362 473

Hello There,

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

.slick-initialized .slick-slide:before {
content: "";
background: rgb(0 0 0 / 25%);
width: 100%;
position: absolute;
height: 100%;
display: block;
z-index: 99999;
top: 0;
left: 0;
}

.hero__text-wrap.slideshow__overlay {
z-index: 99999;
}

.slideshow__overlay:before {
content: none;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Claes
Tourist
8 1 5

Thanks a lot.

I got an error so I had to change the background to background: rgba(0, 0, 0, 0.25);

It is much better even if it loads slightly before the image, but I guess that is how it is

Pallavi
Shopify Expert
2213 362 473

Hello @Claes 

Working fine!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes