Add transparent black overlay to blog post banner image

Hello!

Wandering if anyone could help me add a 30% black overlay to the blog post banner image. I'm using Will Myers code (https://www.will-myers.com/articles/blog-post-banner-image-update) to display the featured blog image as a banner on the post page itself, but need to add an overlay onto the banner image on the blog post page to make the white title on top more legible.

Looking for the code that can do this and to know if it should be added to the "Post Blog Item Code Injection" section which currently has:

<div data-wm-plugin="blog-post"></div>
<style>
.wm-blog-banner {
   min-height: 20vh !important;
}
</style>

Appreciate any help, thanks

Ricky

Link to the site please?

On 12/16/2023 at 2:58 PM, Ziggy said:

Add this to Custom CSS or within the style tags you currently have:

body:not(.sqs-edit-mode-active) {
  .wm-blog-banner:after,
  .sqs-block-image .image-block-wrapper:after {
    background:rgba(0,0,0,0.3);
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }
}

 

That worked perfectly! Much appreciated 🙂

5 minutes ago, Rickshaw said:

That worked perfectly! Much appreciated 🙂

Glad to be a help!