How to change opacity on homepage slider image

  • Resolved Cathy

    (@cathy-dentz)


    10 years, 12 months ago

    Hello:

    I searched for how to change the opacity on the homepage slider image in Customizr and a snippet was available for earlier versions. Since I have the latest version, I’m wondering if the solution is the same. I have a child theme so I can put the snippet CCS in the child theme (I’m not proficient at CCS or even how to use it).

    The image I have on the homepage is busy. I’d like to increase the opacity of the screen on the barn roof so the text can be read easier. Can I do this for one of the homepage slider images and leave the other one with the default opacity or will they all change?

    My site is dentzfarm.com and I’d appreciate any advice on this topic.

    Thank you,
    Cathy

Viewing 7 replies - 1 through 7 (of 7 total)
  • linux4me2

    (@linux4me2)

    10 years, 12 months ago

    If you just want to change the opacity of one image, I’d probably use an image editor (GIMP or Photoshop) to change the opacity of the image and then replace the one on the site.

    Changing the CSS will change the opacity of all the slider images, I think.

    Thread Starter Cathy

    (@cathy-dentz)

    10 years, 12 months ago

    Sorry if I’m not being clear. I don’t want to change the opacity of the barn photo. I want to change the opacity of the screen that sits on top of it, the rectangular box, so the text is easier to read.

    linux4me2

    (@linux4me2)

    10 years, 12 months ago

    Oh, okay. Try adding this to your child theme’s style.css:

    .carousel-caption {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0% 0%;
}

    Change the 0.8 to whatever value you want for the opacity.

    Thread Starter Cathy

    (@cathy-dentz)

    10 years, 12 months ago

    I put the text above on the style.css of my child theme, but then I tried changing the 0.8 and I didn’t see any difference. Is there a spot I needed to put the text before or after? Is there something else I need to change on the actual image?

    linux4me2

    (@linux4me2)

    10 years, 12 months ago

    If you cleared your browser cache and any caching plugin that may cache your CSS, and I have the correct class, you’re doing it right. You may have a priority issue though.

    Try this:

    .carousel-caption {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0% 0% !important;
}

    If that doesn’t do it, you can post a link to your site here and I’ll look.

    Thread Starter Cathy

    (@cathy-dentz)

    10 years, 11 months ago

    It was a cache issue. Thanks for much for your help.

    linux4me2

    (@linux4me2)

    10 years, 11 months ago

    Great, I’m glad you got it working.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘How to change opacity on homepage slider image’ is closed to new replies.