Support Forums

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

Your Time: Our Time:

Slideshow Overlay

Featured Lock Resolved
Hi there,

I want to make a overlay in spectrum, the overlay must only cover the Text - not the whole slider.

I tried this code:

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

But this covers the whole slide.

I also tried this:

.sppb-slide-item-bg.sppb-slideshow-fullwidth-item-bg >div .sppb-slideshow-fullwidth-item-text >div {
max-width: 50%;
background: rgba(0, 0, 0, 0.43);
padding: 30px;
}

But this only covers the button.

I will appreciate any help. Thank you

10 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
maybe ask on CSS forum. we are not here to teach CSS.

or
add bg color with transparency under text


.sppb-slideshow-fullwidth-item-text { background: rgba(255,255,255,0.5); }

F-Cee Van Wyk

More than a month ago #Permalink
Please see the screenshot of what the result.

Attachments (1)

  • slider_screenshot.PNG
    slider_screenshot.PNG 925 KB

F-Cee Van Wyk

More than a month ago #Permalink
Hi there,

I want to make a overlay in spectrum, the overlay must only cover the Text - not the whole slider.

I tried this code:

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

But this covers the whole slide.

I also tried this:

.sppb-slide-item-bg.sppb-slideshow-fullwidth-item-bg >div .sppb-slideshow-fullwidth-item-text >div {
max-width: 50%;
background: rgba(0, 0, 0, 0.43);
padding: 30px;
}

But this only covers the button.

I will appreciate any help. Thank you


Hi Can I please get a reply on the above question. - Thank you.

F-Cee Van Wyk

More than a month ago #Permalink
Hi Guys

Can someone please assist me?

F-Cee Van Wyk

More than a month ago #Permalink
Good day

Can someone please answer my question?

F-Cee Van Wyk

More than a month ago #Permalink
Hi Paul

Thank you for the reply, I was able to figure it out, here is what worked for me and what I wanted to do.

.sppb-slideshow-fullwidth-item-text {
max-width: 80%;
background: rgba(255,255,255, 0.3);
padding: 30px;
}

I apologize for bothering you, I will use your CSS Forum in future.

Attachments (1)

  • aqu_slider.PNG
    aqu_slider.PNG 675.5 KB

Paul Frankowski - Staff

More than a month ago #Permalink
indeed now is better to read text on bg image.
you can also add text-shadow (for text inside) with color white, it also may help.
---
I am glad that it helped.

F-Cee Van Wyk

More than a month ago #Permalink
Thank you Paul, have a good day,:)

Paul Frankowski - Staff

More than a month ago #Permalink
you're welcome.

Next time please do do respond yourself before someone from us do it, otherwise we do not see your topic in unsolved category. :p


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 135
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 120
Toufiq

Toufiq

Total Accepted Answers: 65
Pavel

Pavel

Total Accepted Answers: 5
Peter Atkin

Peter Atkin

Total Accepted Answers: 2

100+

Templates

200,000+

Community Users

Newsletter

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