Grid Blog - move title and overlay onto the image

Hello! I'm trying to figure out how to move the tile and meta data onto the featured image along with an overlay... of the blog on a grid blog, but only on this blog (the site has another grid blog). For this page:

https://www.marineselenee.com/podcast-draft 
PW: story

I've attached an image of the desired outcome (but with a darker overlay) this is the inspiration site: https://www.plumandparcel.com/podcast

There are quite a few solutions for showing the title on hover, but I need the title and overlay to always show. 

It would also be great to be able to adjust the font color / size if possible 🙂

Thank you so much for any assistance! 
With sunshine, Ella

@Web_Solutions Amazing! Thank you much!!! Would it be possible to also: resize the font size for the different elements and also center the text so it's center aligned horizontally and vertically? I'm getting better at CSS but blog elements are definitely out of my wheelhouse! ☀️

15 hours ago, StoriesAroundTheSun said:

@Web_Solutions Amazing! Thank you much!!! Would it be possible to also: resize the font size for the different elements and also center the text so it's center aligned horizontally and vertically? I'm getting better at CSS but blog elements are definitely out of my wheelhouse! ☀️

Replace the previous code with the code below. See the attached image for resizing the font size. You increases the font size by change value 20px, 15px and 14px; 

#collection-65d60fdecdebf12ffb710d19 {
    .blog-title * {
        font-size: 20px !important;
    }
    .blog-excerpt * {
        font-size: 15px !important;
    }
    .blog-more-link {
        font-size: 14px !important;
    }
    
    .blog-item {
        position: relative;
    }
    .blog-item .blog-basic-grid--text{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        padding: 0 1rem;
        box-sizing: border-box;
        text-align: center !important;
    }
    .blog-item .blog-basic-grid--text *{
        color: #fff;
        text-transform: capitalize;
    }
    .blog-item .blog-article-spacer {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
    }
}

@Web_Solutions Amazing thanks so much for your time! Sent you some coffee yesterday and will send more when I get paid from this project ☀️ 

1 hour ago, StoriesAroundTheSun said:

@Web_Solutions Amazing thanks so much for your time! Sent you some coffee yesterday and will send more when I get paid from this project ☀️ 

Thank you so much!