-
AuthorPosts
-
November 5, 2015 at 1:18 am #530470
I have a full width easy slider, and I wish to add a linear gradient to all the images that are shown on this slider.
I know I can add a custom css class – but how do i write the code so that it applies to all the images on the slider?November 5, 2015 at 10:02 am #530632Hi mrivanp,
Do you want to add a linear gradient as an overlay, not sure if I understand what you are trying to do? Please provide us with a link to the site in question so that we can take a closer look.
Regards,
RikardNovember 5, 2015 at 7:17 pm #531122yes, that is what i am trying to do. I want to add linear gradient as an overlay to ALL the slides.
November 7, 2015 at 8:27 am #531796Hey!
Add this in the Quick CSS field:
.avia-slideshow-inner:before { content: ''; display: block; width: 100%; height: 500px; background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(41,137,216,0.8) 50%, rgba(32,124,202,0.8) 51%, rgba(234,126,126,0.69) 79%, rgba(234,126,126,0.6) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,0.8)), color-stop(51%,rgba(32,124,202,0.8)), color-stop(79%,rgba(234,126,126,0.69)), color-stop(100%,rgba(234,126,126,0.6))); background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(41,137,216,0.8) 50%,rgba(32,124,202,0.8) 51%,rgba(234,126,126,0.69) 79%,rgba(234,126,126,0.6) 100%); background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(41,137,216,0.8) 50%,rgba(32,124,202,0.8) 51%,rgba(234,126,126,0.69) 79%,rgba(234,126,126,0.6) 100%); background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(41,137,216,0.8) 50%,rgba(32,124,202,0.8) 51%,rgba(234,126,126,0.69) 79%,rgba(234,126,126,0.6) 100%); background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(41,137,216,0.8) 50%,rgba(32,124,202,0.8) 51%,rgba(234,126,126,0.69) 79%,rgba(234,126,126,0.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#99ea7e7e',GradientType=1 ); position: absolute; top: 0; left: 0; z-index: 100; } #top .avia-slideshow-arrows a { z-index: 200; }
Generate the gradient css code here: http://www.colorzilla.com/gradient-editor/
Regards,
IsmaelNovember 27, 2021 at 10:50 pm #1330704Hi, i did a nice gradient, but how can i set the z-index for the caption and button on the Slider above the overlay.
November 29, 2021 at 3:56 am #1330767 -
AuthorPosts
- The topic ‘Adding linear gradient to a fullwidth easy slider’ is closed to new replies.