Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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?

    #530632

    Hi 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,
    Rikard

    #531122

    yes, that is what i am trying to do. I want to add linear gradient as an overlay to ALL the slides.

    #531796

    Hey!

    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,
    Ismael

    #1330704

    Hi, i did a nice gradient, but how can i set the z-index for the caption and button on the Slider above the overlay.

    #1330767

    Hi,

    Try to use this css code to adjust the z-index of the sliders.

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

    If you need further help, please feel free to open another thread. We will close this one for now.

    Have a nice day.

    Best regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Adding linear gradient to a fullwidth easy slider’ is closed to new replies.