Full Width Featured Blog Image with Color Overlay Filter

Store Design
, , , ,
1

Hi guys,

I saw a post on the forum where someone shared the following code to make the featured blog image display in full width, and it works well:

.article-template__hero-container { max-width: 100%; }
nav.breadcrumb { padding-top: 0!important; }


 screen and (min-width: 1600px) {
.article-template__hero-medium {
height: 100rem;
}
}

However, I would like to add a color overlay (filter) on top of the image with around 35% opacity, similar to a hero image overlay.

Could anyone please advise how this code can be modified to achieve that effect?

Any help would be greatly appreciated.
Many thanks!

1 Like
2

Hey @enrique2025

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

4

Hi @enrique2025,

Kindly provide your store URL please and if it is password protected, please share the password as well.
Thanks!