Toggling blog post excerpts on hover can be an effective way to keep a compact grid layout for your blog posts without abandoning those excerpts altogether. The idea is to hide the excerpts initially and then toggle their visibility when hovering over a post item within the grid. This allows users to see more posts within the browser viewport while providing the user with the option to see excerpts of posts they are interested in by hover over the post.
In this tutorial, we are going to show you how to toggle blog post excerpts on hover in Divi. To do this, we will be adding a few snippets of custom CSS that will toggle the excerpts of a blog module’s post item on hover (no JQuery needed). Once the code is in place, you can style the blog module however you want using Divi’s built-in settings.
Let’s get started!
Sneak Peek
Here is a quick look at the design we’ll build in this tutorial.
Download the Layout for FREE
To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
To import the section layout to your Divi Library, navigate to the Divi Library.
Click the Import button.
In the portability popup, select the import tab and choose the download file from your computer.
Then click the import button.
Once done, the section layout will be available in the Divi Builder.
Let’s get to the tutorial, shall we?
What You Need to Get Started
To get started, you will need to do the following:
After that, you will have a blank canvas to start designing in Divi.
How to Toggle Blog Post Excerpts on Hover in Divi
Creating the Blog Module Layout
First, we need to create a basic layout for our blog posts. For this example, we are going to add a one-column row with a blog module inside it.
Create Row
Add a one-column row to the section.
Row Width
In the row settings modal, update the following design settings to adjust the width.
Add Blog Module
Inside the column of the row, add a new blog module.
Blog Module Settings
Next, update the blog module content settings by selecting to show the read more button.
Under the design tab, select the Grid layout for the blog.
Under the advanced tab, add the following CSS Class:
We will use this class as a selector for our custom CSS code in the next step.
Add Custom CSS with Code Module
At this point, we have a basic grid layout for our blog posts with a custom CSS class added to the blog module. We will use this CSS Class selector to target this specific blog module and add a toggle effect on hover to the post excerpt portion of the post item.
To add the CSS, we are going to use a code module. Add a new code module below the blog module.
Paste the following custom CSS needed for the post excerpt toggle effect. Make sure to wrap the CSS in the necessary style tags.
Let’s check out the result so far on live page.
We’ll go over the code a little more in detail at the end of the article. But for now, let’s check out the result so far.
Add Additional Styling to the Blog Module with Divi Builder
Now that the CSS is in place to give us the toggle effect for our blog post excerpts, we can add any additional styling to the blog module using the Divi Builder.
For this example, we are going to make minimal adjustments to the style, but feel free to explore your own styling as well.
Style Post Title
Style Read More Text
Style Pagination
Remove Border
Style Box Shadow on Hover
Final Result
About the CSS Code
If you are interested in the breakdown of the custom CSS added to the code module earlier, here it is.
First, we need to wrap all of the CSS in a media query that will only apply the CSS to desktop browsers.
Second, we need to add a transition with a duration of 500ms to the post content/excerpt to the style changes that will occur when hovering over the post item.
Third, we need to make sure the post content/excerpt remains visible when using the visual builder so that we can make edits.
Fourth, we need to hide the post content/excerpt by default when the page loads. To do this we use visibility:hidden to hide the content. Then we add opacity:0 so that we can get a fade in and fade out transition effect when we add opacity:1 to the hover state. We also use max-height:0px to get the sliding toggle effect when we add max-height:500px to the hover state.
Fifth, we show the post content/excerpt when the post item (.et_pb_post) is in the hover state. To do this we change the visibility to visible, the opacity to 1, and the max-height to 500px.
For the final snippet, we can give all the post items the same min-height for a cleaner vertically aligned grid layout.
Here’s one more look at the final code.
Final Thoughts
As shown in this tutorial, adding a few snippets of CSS can give you the functionality needed to toggle blog post excerpts with a nice hover effect. The best part about this method is that we can build upon this functionality by adding any additional styling we want to the blog module using Divi’s built-in options. This will allow you to add more advanced styling to the post items including more hover effects. Hopefully, this will help give your Divi website’s blog an additional boost in design and functionality.
I look forward to hearing from you in the comments.
Cheers!
This content was originally published here.