Divi Blog Section, Part II - The Featured Card Post

Hey everyone, today we will see another Divi Blog idea with our second Divi Blog Section appointment. In the first post of the series we have seen how we set up the shaped blog section on homepage playing with clip-path css on hovering the three-column blog layout. Now we want to show you how we have created with Divi Blog Module our Featured Post in homepage right above the shaped blog section.

We need just Divi Builder and a good deal of Css to refine our design and give it a touch of interaction.

So, let’s get started!

THE BASIC LAYOUT

First of all we have to create our Standard Section and our two-column Row in the section. We set a blue gradient background and top/bottom padding/margin to 0.

Before we can leave the Row Settings we also have to add a custom Css Class for Column 2 and two lines of Css to Main Element:
border-radius: 25px;
box-shadow: 5px 5px 5px;

Then we will add a Divi Blog Module in each column and we will set our preferences as follow.

The parameters above are the only shared between the two Blog modules we created. Then we are going to customize each of these Blog modules in a complementar way so that one will show the featured image and the other one – just aside the first one – will show the title, the post meta, the author, comments and, on hover, the excerpt and Read More button.

COLUMN ONE

Then, in the advanced tabs options we are going to put “only_img_blog” as Css Class of the module ( we will need it later ).

COLUMN TWO

So in this second Blog module we checked all the options but the Show Featured Image and the Show Pagination ones. Finally we added a Css ID and a Css Class for the Read More button.

THE MAGIC OF CSS

Now the magic. We go in Divi Theme Options -> General -> Custom Css and we add in order the following css snippets to get our final result.

CSS FOR COLUMN ONE

/* Hide the excerpt of column one */

.only_img_blog p {
 display: none;
}

/* Set margin-top, the border-radius and box-shadow of the featured image, then add a transform perspective and some translations */

.only_img_blog img {
margin-top: 15%;
border-radius: 3% !important;
box-shadow: -5px -3px 1em gold;
transition: all 1s;
transform: perspective(50em) rotateY(40deg) translateX(50px);
}

/* Add hovering effects to perspective, translations and box shadow */

.only_img_blog_section:hover .only_img_blog img {
 transform: perspective(50em) rotateY(0deg) translateX(20px) translateY(25px);
box-shadow: 5px 3px 1em ghostwhite;
}

CSS FOR COLUMN TWO

/* Create a Custom Overlay on the second column; set max height and translate a little the blog module; set opacity to 0 and translate very much toward right the post content; add the "Featured Post" badge */

.custom_overlay {
background-color: black;
padding: 4% 5% !important;
margin: 0 !important;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
opacity: .3;
transition: all .8s;
}
#featured_blog {
max-height: 300px !important;
transition: all 1s;
transform: translateY(20%);
}
#featured_blog .post-content {
opacity: 0;
transition: all .8s;
transform: translateX(1200px);
}
#featured_blog::before {
content: "FEATURED POST";
background-color: orange;
padding: 2%;
}

/* ON HOVER: Set opacity and translation for the overlay; translate up the blog module; translate the content to original position */

.only_img_blog_section:hover .custom_overlay {
background-color: transparent;
opacity: 1;
transform: translateY(15px);
}
.only_img_blog_section:hover #featured_blog {
 transform: translateY(0px);
}
.only_img_blog_section:hover #featured_blog .post-content {
 transform: translateX(0px);
 opacity: 1;
}

/* READ MORE BUTTON: finally we add the custom read button sliding from right on hover */

#featured_blog a.more-link {
 transition: all 1s cubic-bezier(.75,-0.5,0,1.75);
}
.only_img_blog_section:hover #featured_blog a.more-link {
 opacity: 1;
 transform: translateX(-25%);
}

So we have now our final result just like you can see on How i-Divit Homepage. A nice and clean Divi Blog card, simple enough to not be too heavy as design, but also enough interactive for calling the user attention.

Hope also this blog suggestion could be useful. See the next post.

Cheers!