Adding Overlay to Blog Images in 7.1

Site URL: https://www.kinandfriendscookbook.com/

I have figured out how to make my blog titles overlay on to the image and want to add an overlay over the image so that the white font pops more. If anyone could help that would be amazing. 

Thanks everyone!

You mean: Recent Posts?

title hidden

hover: add image overlay + white title appear?

Yes recent post.

Yes to image overlay + white title appear. 

Thank you!

17 hours ago, Olivia95 said:

Yes recent post.

Yes to image overlay + white title appear. 

 

Thank you!

 

Add to Home > Design > Custom CSS

/* show title on hover */
.blog-basic-grid--text {
    opacity: 0;
    transition: opacity 0.25s ease-out;
}
.blog-item:hover .blog-basic-grid--text {
    opacity: 1;
}
/* show overlay on hover */
.blog-item .image-wrapper:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.75);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.25s ease-out;
}
.blog-item:hover .image-wrapper:after {
    opacity: 1;
}

Thank you so much! This was it!