Adding gradient overlay on Fullwidth Slider - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
November 29, 2021 at 11:55 am #1330825

breezemedia
Participant

Hi,
somehow your answer in Ticket #1330767 was closed, but did not work.

i have an Slider and want to du a gradient overlay. That works fine.
BUT the z-index is a little mixed up and my Buttons and Text is now below the overlay. Your solution to set
.avia-slideshow-inner li {
z-index: 200 !important;
}
does not work the way i need. Now the gradient slider is below everything…

Here is the full used code. In Private Content you can see the websitel

/* SLIDER */
.avia-slideshow-inner:before {
content: ”;
display: block;
width: 100%;
height: 600px;

/* VERLAUF ERSTELLT MIT https://colorzilla.com/gradient-editor */
background: -moz-linear-gradient(left, rgba(236,110,0,0.75) 0%, rgba(234,172,124,0.57) 24%, rgba(255,255,255,0.25) 66%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(236,110,0,0.75) 0%,rgba(234,172,124,0.57) 24%,rgba(255,255,255,0.25) 66%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(236,110,0,0.75) 0%,rgba(234,172,124,0.57) 24%,rgba(255,255,255,0.25) 66%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#bfec6e00′, endColorstr=’#00ffffff’,GradientType=1 );
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

.avia-slideshow-inner li{
z-index: 200 !important;
}

#top .avia-slideshow-arrows a {
z-index: 200;
}

November 30, 2021 at 8:35 am #1330942
Ismael
Moderator
Hey breezemedia,

Thank you for opening a new thread.

We automatically close threads, specially olds ones, if someone else aside from the OP re-opened it. So we recommend opening your own thread instead of replying to an existing one.

To fix the issue with the overlay, please remove the previous css code, then use the following css instead.
```
.avia-slideshow li .avia-slide-wrap > div:before {
    content: '';
    display: block;
    width: 100%;
    height: 600px;
    background: -moz-linear-gradient(left,rgba(236,110,0,0.75) 0%,rgba(234,172,124,0.57) 24%,rgba(255,255,255,0.25) 66%,rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(left,rgba(236,110,0,0.75) 0%,rgba(234,172,124,0.57) 24%,rgba(255,255,255,0.25) 66%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to right,rgba(236,110,0,0.75) 0%,rgba(234,172,124,0.57) 24%,rgba(255,255,255,0.25) 66%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfec6e00',endColorstr='#00ffffff',GradientType=1 );
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.avia-slideshow li .avia-slide-wrap > div .caption_container {
    z-index: 2000;
}
```
This is how the slider should look like after applying the css.

Screenshot: https://imgur.com/VQd2JMN

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css or before checking the page.

Best regards,
Ismael
December 1, 2021 at 12:21 am #1331054

breezemedia
Participant

Thank you Ismael,
works great!

December 1, 2021 at 10:42 am #1331106

Ismael
Moderator

Hi,

No problem! Glad we could help. Please feel free to open another thread if you need anything else.

Have a nice day.

Best regards,
Ismael
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Adding gradient overlay on Fullwidth Slider’ is closed to new replies.