Purpose Theme – Overlay featured image with color
-
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)
-
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.
-
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.
-
-
- The topic ‘Purpose Theme – Overlay featured image with color’ is closed to new replies.