[Share] Add an overlay over Banner Slideshow

You can use these CSS code to add an overlay over List Banner Slideshow. If you can't make it work, you can send site url, I will check again.

#1. Add an overlay on All Banner Slideshows

div.user-items-list-banner-slideshow .slide-media-container:after {
    content: "";
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#2. Add an overlay on Banner Slideshows (One Page)

First, you need to use below tool to find Page ID. Use below tool.

In my example, we will have: #collection-66aae9bd8b99a43e3468bf45

Next, use this CSS code

#collection-66aae9bd8b99a43e3468bf45 div.user-items-list-banner-slideshow .slide-media-container:after {
    content: "";
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#3. Add an overlay on Specific Banner Slideshow

First, use #2 to find Banner Slideshow ID. In my example, we have: 

section[data-section-id="66aaecd26d74120473fc1def"]

Next, use CSS code

section[data-section-id="66aaecd26d74120473fc1def"] .slide-media-container:after {
    content: "";
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#4. Add an overlay on Desktop Only

Use this CSS code

@media screen and (min-width:768px) {
div.user-items-list-banner-slideshow .slide-media-container:after {
    content: "";
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
}

#5. Add an overlay on Mobile Only

Use this CSS code

@media screen and (max-width:767px) {
div.user-items-list-banner-slideshow .slide-media-container:after {
    content: "";
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
}