Purpose Theme – Overlay featured image with color

hilarycshore · Member · Jul 25, 2018 at 9:52 pm
Copy link

Add topic to favorites
Is it possible to add a dark tint to featured images? It’s hard to read the white text of the page’s title on top of the images. For example: https://democracyatworkdc.com/about/. I want to overlay a semi-opaque grey so that the words “pop”.

The blog I need help with is: (visible only to logged in users)
wpx2 · Member · Jul 25, 2018 at 10:53 pm
Copy link
Hi @hilarycshore

The custom CSS code below will add an overlay dark tint to your website’s featured images.
```
.feature-img:after {
content:""; 
position:absolute; 
top:0; left:0; 
bottom:0; 
right:0; 
background-color: rgba(0,0,0,0.3)
}
```
You will have to place the custom CSS code above in the CSS editor in your Dashboard.
To access the CSS editor, first launch your site customizer then click on the CSS tab to access the CSS editor.

Please note that the Custom CSS feature is only included in Premium and Business plans and you can read more about it here:
http://en.support.wordpress.com/custom-css/

Let me know if this helps.
hilarycshore · Member · Jul 26, 2018 at 12:53 pm
Copy link
Thanks for replying @wpx2. I tested, and while this code does tint the featured image it also tints the text which sort of defeats the purpose. Is there a way to apply it to the IMG only?
garysixtyeight · Member · Jul 26, 2018 at 2:11 pm
Copy link
Hi Hilary,

Once the CSS provided by @wpx2 has been added to the customizer, please also add this additional rule.
```
.headline.img-headline {
    z-index: 1;
}
```
It should make the text appear brighter because it’ll be placed in front of the dark overlay created by the first CSS rule, rather than behind it.
hilarycshore · Member · Jul 26, 2018 at 3:46 pm
Copy link
Ah – that does it perfectly. Thank you so much @garysixtyeight and by @wpx2!
garysixtyeight · Member · Jul 26, 2018 at 11:21 pm
Copy link
You’re welcome, glad we could help :)

No items found.