Way to tint header images a little darker?

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 6 years, 3 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.

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!