Header Slider Opacity


#1

Hi,

Is there any way to change the Opacity of the Header Slider Images?


#2

Hello @wilko88,

I’m not sure what exactly is your issue, Talon header slider doesn’t have any filter. Can you please describe your issue more precisely?

Kind Regards, Roman.


#3

Hi Roman,

I am wanting to add an opacity filter to the image, similar to what the Astrid theme looks like. Hope this makes more sense.


#4

Hello @wilko88,

You can try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS.

.slider-item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(37, 46, 53, 0.9);
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#5

Perfect, thanks Roman.

I ended up using .slider-item::after so the text and button stayed the same


#6

You are welcome @wilko88! :slight_smile:

Kind Regards, Roman.


#7

Dear Roman,

Would you be so kind please and help me?

I’ve used your suggested CSS code in Lato theme however this code changes the opacity of “Slide title” and “Button” as well. Can you advice please what CSS should I use if I want the “Slide title” and “Button” remain unaffected?

Regards,

Vlaidmir


#8

Hi,

Can you help me please? What was that CSS you used in Talon theme for opacity but the “Slide title” and “Button” remained unaffected? Because “.slider-item::after” affects both.

Regards,

Vlaidmir


#9

Hello Vlaidmir,

Please create a new topic in your theme forum (and please include a link to your website there) to keep forums in good order and make it easier to help you. I’ll close this topic to avoid confusion.

Kind Regards, Roman.


#10