Featured Image Overlay Opacity

• 

  thelookclass · Member · Jan 18, 2017 at 1:25 am

  • Copy link
  • Add topic to favorites

  Hi

  I am wanting to darken my featured image overlay on my site so the white text is clearer to read.

  Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  car12fiel · Member · Jan 18, 2017 at 2:08 am

  • Copy link

  body:not(.no-sidebar).home .content-area {
  width: 100%;
  }

• 

  thelookclass · Member · Jan 18, 2017 at 2:16 am

  • Copy link

  im sorry, what is this for?

• 

  thesacredpath · Member · Jan 21, 2017 at 6:31 am

  • Copy link

  Hi @thelookclass, that overlay on the featured images has me stumped. Since it is the weekend, I’m probably not going to be able to get with one of our developers to figure out how to lighten that up, so it may be Monday before I can get back to you.

• 

  thesacredpath · Member · Feb 14, 2017 at 7:05 pm

  • Copy link

  Hi, sorry for the delay on this. I have a couple options. This first bit of code will darken the overlay on the featured images at the top of your home page. You can adjust the 0.7 value as desired. The closer to 0, the more dark the overlay will get.

  .featured-slider {
  	opacity: 0.7 !important;
  }

  This second option adds a slight text shadow on the titles that overlay the images. You can try this as well and see which you like better.

  .featured-slider a {
  	text-shadow: 2px 2px 2px #000;
  }

• 

  thelookclass · Member · Feb 14, 2017 at 7:43 pm

  • Copy link

  Thanks for that. However, I was meaning about the menu header though, so would like to make it almost transparent but not so much.

  Thanks

• 

  thelookclass · Member · Feb 14, 2017 at 7:44 pm

  • Copy link

  also, would like to add darkness to the hover of the feature slider only.

• 

  thesacredpath · Member · Feb 17, 2017 at 6:04 pm

  • Copy link

  Hi, I’m not sure I understand what you are meaning. When you say menu header, are you talking about the white area at the top?

• 

  thelookclass · Member · Feb 18, 2017 at 8:37 pm

  • Copy link

  Hey, so the white header area with the nav links and logo on it is white and solid white but I would like to make it a bit transparent.

• 

  thesacredpath · Member · Mar 11, 2017 at 9:14 pm

  • Copy link

  The white area at the top does not overlay the top of the featured image. The featured image is spaced down below that, so the white you see is actually the color set on the body element, so making the header area transparent would not do anything since the section behind it is white.

  We could set the body background color to a grey to match the image like this.

  body {
      background: #cecece;