Support » Theme: Block Lite » Way to tint header images a little darker?

  • Hello,

    I was hoping to make the header image on the main page and in the blog posts be a little darker. Something like the post-navigation / next-post images on the bottom of the blog posts. Looks like it might be a background color value with a .4 opacity, but I’m not sure how to apply that to these headers. Any suggestions?

    Thanks!

    -Spencer

Viewing 4 replies - 1 through 4 (of 4 total)
  • Follow-up: The goal was to make white text stand out better against arbitrary images that might have white in them, and I ended up just making the background of the text blocks .4 opacity black. Still curious about how to do what I described in my original, but I’d happily take solutions to the other two questions I posted before this one. 🙂

    • This reply was modified 1 year, 2 months ago by spencerpdx.

    “I ended up just making the background of the text blocks .4 opacity black.” Exactly how did you do this? I’d like to get the same effect.

    Theme Author Organic Themes

    (@organicthemes)

    Hello,

    For making the blog post images darker, you can add the following styles:

    .post-holder .featured-img::before {
      background-color: rgba(0, 0, 0, 0.4);
    }
    .post-holder .featured-img:hover::before {
      background-color: rgba(0, 0, 0, 0.7);
    }

    For making the header image darker, you could try the following style:

    #wp-custom-header::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      z-index: 2;
    }

    I hope this helps. Thanks!

    Thanks so much! Ok, one more question now that the blog post images are darker on hover – how can I get the text to be lighter? I’ve been googling and I can’t seem to figure it out.

    Thanks again for your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Way to tint header images a little darker?’ is closed to new replies.