Today I have another, pretty straight forward and easy to use code snippet for all Divi-User out there. Eleganttheme’s Divi comes with the so called Blog-Module. Its functionality is to take your Blog Posts and show them in a really, clean, masonry blog grid including featured image, title and post excerpt.

With the following code snippet, I show you how to create a really useful effect to show the post excerpt only if you hover one of the article cards. To keep the height, we slide out the featured image and slide in the post excerpt instead.

First of all, go to the page of your choice, use the Divi-Builder to insert a new Blog-Module. Make the settings as you wish. In my example I choose to only show the featured image, the title, and the post excerpt. See the image below:

In the Custom CSS section, in the CSS Class field, type in any custom class name you like. I choose blog-hover-effect. Next, head over to the Divi-Theme Options > General Tab and scroll down all the way down to the Custom CSS Field. We use a very little CSS-Snippet to make the post-excerpt on the Blog-Module disappear by default.

.blog-hover-effect .post-content {
	display:none;
}

Last step : Go to Divi-Theme Options > Integration, and add the following Code Snippet into the Add code to the <head> of your blog field:

<script type="text/javascript">
jQuery(document).ready(function() {

 jQuery(".blog-hover-effect article").hover(function() {
      jQuery(this).find(".post-content").slideToggle();
      jQuery(this).find(".et_pb_image_container").slideToggle();
  });
  
});

</script>

I used the slide-toggle function from jQuery to create this effect. Read more about the function in the jQuery Documentation

Leave me a comment if you have any questions or concerns !