This is the first in a series on adding some cool customizations and hover effects to the Divi Blog Grid layout.

In this tutorial I am going to show you how you can make the excerpt, otherwise known as the post-content, slide down from behind the blog image and title when you mouse over them.

View The Live Demo

Let’s Get Started Making The Divi Blog Grid Slide Down Effect

 

Adding The Blog Modules

1. Create a row and give it 3 columns.

Divi Blog Grid Slide Down Animation 1

 

2. Add a Blog Module to the first column.

blog grid slide down 2

 

3. Next you will adjust the settings as follows.

  • Layout: Grid
  • Posts Number: 1
  • Show Featured Image: Yes
  • Content: Show Excerpt
  • Read More Button: Yes (optional)
  • Show Author: Yes (optional)
  • Show Date: Yes (optional)
  • Show Categories: Yes (optional)
  • Show Comment Count: No
  • Show Pagination: No
  • Offset Number: 0

blog grid slide down 3

 

4. Now duplicate the blog module twice and move the extra two over into the next two columns.

blog grid slide down 4

 

5. In the second blog module change the offset number to 1. And in the third blog module change the offset number to 2.

blog grid slide down 5

 

6. Save your page and move on to the magic of adding a little CSS.

 

 

Adding The Custom CSS

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)

Add this CSS.

/*------------------------------------------------*/
/*---------[GQ - BLOG GRID SLIDE DOWN]------------*/
/*------------------------------------------------*/

	@media only screen and (min-width : 981px) {
		.et_pb_blog_grid .et_pb_post {
			border: 1px solid transparent;}

		.et_pb_image_container {
			z-index: 2;
			margin-bottom: 0px;}

		.et_pb_blog_grid h2 {
			background: #ffffff;
			margin-top: 0px;
			padding: 10px 0px 0px;
			z-index: 2;
			position: relative;}			

		.et_pb_post .post-meta {
			margin: 0px 0px 15px;
			background: #ffffff;
			z-index: 2;
			position: relative;}			
			
		.post-content {
			margin-top: -100%;
			opacity: 0;
			z-index: 0;
			-webkit-transition: all .7s ease-out;
			-moz-transition: all .7s ease-out;
			-ms-transition: all .7s ease-out;
			-o-transition: all .7s ease-out;
			transition: all .7s ease-out;}

		.et_pb_blog_grid:hover .post-content {
			margin-top: 0px;
			opacity: 1;}

		.et_pb_blog_grid:hover .et_pb_post {
			border: 1px solid #d8d8d8;}}

 

 

Making Adjustments

I wrapped this in a media query so that it only applies the CSS on typical desktop screen sizes.

blog grid slide down 6

 

In case you want to adjust the padding a little for the title and the meta, you can do that here.

blog grid slide down 7

 

If you need the background color of the title and the meta to match the background color of the section, you can change that here:

blog grid slide down 8

 

If you want to change the color of the border, you can change that here:

blog grid slide down 9

 

 

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

Have fun!


Well, that’s all for now. I hope you find this article useful.


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest