We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Slideshow overlay ordering

Featured Lock Resolved Issue
I am using this code for my slideshow

.sppb-slideshow-fullwidth-item-bg:after {
content: ""
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(28,49,74,0.4);

.sppb-slideshow-fullwidth-item .sppb-fullwidth-title:not(.sppb-slidehsow-sub-title),
.sppb-slideshow-fullwidth-item-text a {
color: #FFC001 !important;
.sppb-slideshow-fullwidth-item .sppb-slidehsow-sub-title,
.sppb-slideshow-fullwidth-item-text p {
color : #fff !important;

This puts an overlay over the slide which I want but it puts it over the text so it dims the text.

I have used this code before to make an overlay on a slideshow.
.sppb-slider-wrapper.sppb-slider-fullwidth-wrapper .sppb-slideshow-fullwidth-item-bg::before
{background: rgba(0,0,0,0.3);}

But that isn't working either. For some reason if I put before in the code, it takes the overlay away completely. Is there a way to fix this?


2 Answers

Sifat - Staff

More than a month ago #Permalink
Thanks for your query. Please use this css into your custom css and that should solve the issue.

.sppb-slide-item-bg.sppb-slideshow-fullwidth-item-bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #f71b1bab;
z-index: -1;
.sppb-slide-item-bg.sppb-slideshow-fullwidth-item-bg {
z-index: 1;
position: relative;

.sppb-slide-item-bg.sppb-slideshow-fullwidth-item-bg .container {
position: relative;
z-index: 2;

-Best Regards

There are replies in this post but you are not allowed to view the replies from this post.




Community Users


Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us