Overlay Color Film on Slider

[Sedat Karakaya]

I am trying to figure out how I can put a gradient overlay film on slider image. Using Complete Pro theme fyi.

An example can be seen at https://www.bluehost.com/contact.

[Sonl Sinha]

Hi,

Kindly show us your website URL please?

Regards,
Brad

[Sedat Karakaya]

Working on a local host that’s whty I can not share any link at the moment. Please send me the custom css code to make it happen on Complete Pro Theme Slider….

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

#slider::before {
    position: absolute;
    content: ">>";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, #71A024 0%, #0160A2 100%);
    opacity: 0.5;
}

Regards,
Brad

[Sedat Karakaya]

Placed the css but nothing has changed on the slider image… Category name #Slider is correct but it does not have any influence on the slider.

[Sonl Sinha]

Hi,

Okay, Kindly go to style.css >> scroll down to bottom and paste CSS code there.

#slider::before {
    position: absolute;
    content: ">>";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, #71A024 0%, #0160A2 100%);
    opacity: 0.5;
}

Regards,
Brad

[Sedat Karakaya]

Sorry but it did not work out… Any other suggestions?

[Sonl Sinha]

Hi,

Kindly add in style.css:

#slider::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, #71A024 0%, #0160A2 100%);
    opacity: 0.5;
    z-index:20;
}

Regards,
Brad

[Author]

Posts