image clarity

• 

  loveslegato · Member · Sep 14, 2017 at 10:30 pm

  • Copy link
  • Add topic to favorites

  Hi:

  I am looking to get my featured images to be more clear and bright.

  Currently, I am using this code:

  #primary-header .featured-image {
  opacity: .5;
  }

  but its making the words hard to read (ie: home page).

  Is there a way to add maybe a gray filter or darken the letters?

  thanks

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

• 

  thesacredpath · Member · Sep 15, 2017 at 12:15 am

  • Copy link

  Hi, I can’t see another way to do this that doesn’t look funny. We could add an RGBA background to the title/categories container, but it looks strange when I do that. If you want to try this, change the .8 opacity you have to 1 and then add the following.

  .home.page-template #primary-header .container {
    background: rgba(0, 0, 0, 0.4) !important;
  }

• 

  loveslegato · Member · Sep 15, 2017 at 12:25 am

  • Copy link

  Thanks. Though, I was going more for something like this: https://datadrivenathlete.com

  they seem to have a filter vs opacity over picture vs a textbook.

  thanks

  p.s. I am using appetite theme by the way.

• 

  thesacredpath · Member · Sep 15, 2017 at 12:30 am

  • Copy link

  @loveslegato, we would need an overlay div from what I can see to do that, so as an alternative, I would suggest editing your image and adding a translucent overlay to the image itself and then use that as your featured image.