Blogs: Remove or reduce overlay shadow effect
The main blog index page shows a preview of your articles. The featured image from your blog and title are displayed. The image has an overlay effect to help read the title text. This customization allows you to remove or reduce the darkness of the overlay.
Blog index page (grid view):
Result with lighter overlay and bold title:
Code to decrease overaly:
/* -- code to decrease blog overlay -- */
.blog__article__overlay:after { opacity:0.5; }
/* - end - */
The opacity value can be adjusted to your needs. 0.1 would be almost no overlay and 0.9 would be high background overlay.
Before:
After:
with opacity: 0.5
After:
with opacity: 0.1 and bold title
If the above code isn't affecting the overlay, try this to completely remove the overlay:
/* -- code to remove blog overlay -- */
.blog__article--image:after { display:none; }
/* - end - */
Code to make the title font bold:
/* -- code to make blog headings bold -- */
h3.blog__article__title { font-weight:bold; }
/* - end - */
Where do I add the code?
Use this link to learn where exactly to add this code snippet: