Blog post as background featured image

If you want to make your blogs to look like below image

Then you just need to follow steps;

Step 01

First, make a blog module as a full-width blog. Then add a class to this blog module. In my case, I have added a class “lt_news_blog” and save this module and head towards Divi Theme CSS section.

Step 02

In this step we will do styling. Copy below mention CSS and put it in your theme CSS

.lt_news_blog article {display:inline-block;width:47%;position:relative;padding:50px; height:235px; overflow:hidden; text-align:center;}
.lt_news_blog article:first-child {margin-right:55px;}
.lt_news_blog article .entry-featured-image-url {position:absolute;top:0px;left:0px;}
.lt_news_blog article:hover .entry-featured-image-url {opacity:0.8;}
.lt_news_blog article .entry-title,
.lt_news_blog article .post-meta,
.lt_news_blog article .post-content {position:relative;z-index:99;}

@media only screen and (max-width:1300px) and (min-width:800px) {
.lt_news_blog article {width:46%;}
.lt_news_blog article .post-content {height: 20px; overflow: hidden;}
}

@media only screen and (max-width:800px) {
.lt_news_blog article:first-child {margin-right:0px;}
.lt_news_blog article {width:100%;height:140px;}
.lt_news_blog article .post-content {display: none;}
}

And that’s it 🙂

Let me know in comments if any issue appears.

Note: In this tutorial I have given a specific height to each blog so that layout remains intact. Adjust height in your website as per your requirement.