How to Build a Seamless Hover Grid in Divi (Easy Step-by-Step Guide)

For web creators passionate about crafting engaging and interactive digital experiences, get ready to dive into a fantastic Divi design tutorial. You’re in for a treat with this comprehensive guide to mastering a seamless hover grid effect in Divi. We’ll start with a grid that looks deceptively simple and clean at first glance, presenting content in a neat, uncluttered fashion. But the magic happens on hover. Upon hovering over an individual grid item, a stunning transformation occurs. A previously unseen background image is gracefully revealed, while the surrounding text and elements dynamically adjust their appearance. This creates a truly beautiful and intuitive interactive experience for your website visitors, adding a layer of sophistication and engagement to your design. And don’t worry, this tutorial is designed to guide you from start to finish, breaking down the entire creation process into easy-to-follow steps, making it straightforward and achievable for anyone looking to elevate their Divi projects.

In this tutorial, we’ll provide both a detailed video walkthrough and all the necessary code snippets to help you implement this effect on your own Divi website.

Video Tutorial

Prefer to watch and follow along? This video tutorial covers every step needed to build your seamless hover grid from scratch in Divi.

The Code

Here is the complete CSS code used in this tutorial.

CSS Classes

A Quick but Important Note about Adding Classes in Divi:
When you’re entering CSS class names into the dedicated fields within the Divi module or column settings, remember that you do NOT need to include the dot (.) prefix. Divi automatically adds the dot for you behind the scenes. Just type the name of your class, like my-custom-class, not .my-custom-class.

The Column Class

First, we’ll add a custom CSS class to the Column that contains our module. This class is important because it will allow us to easily target and apply styles to the entire container for each grid item – giving us control over padding, borders, or even layout adjustments specifically at the column level if needed.

dd-hover-column

The Title Class

Next, to make sure we have very precise control over just the Title or heading text within our module, we’re going to give it its own custom CSS class. This is great for applying specific colors, font sizes, or hover effects to the title without affecting any other text elements inside.

dd-hover-title

The Text Class

To give us even more fine-grained control over specific text elements within our grid item – perhaps just the paragraph text, a caption, or a group of text elements – we can add a dedicated Hover Text class. Applying this class to the particular text elements or their immediate container will allow us to write CSS rules that only affect this marked text when someone hovers over the main grid item, ensuring precise styling for your hover effect.

dd-hover-text

The Button Class

If your module includes a Button, adding a specific CSS class to it will allow you to style that button exactly how you want it, especially for its appearance on hover. This ensures you can fine-tune the button’s look independently from other buttons or elements in your grid item.

dd-hover-button

Simply copy and paste this into your Divi Theme Options Custom CSS area or the Custom CSS area of your page/layout settings.

.dd-hover-column:hover .dd-hover-title {
background-color: #000000;
}
 
.dd-hover-column:hover .dd-hover-title h3 {
color: white !important;
}
 
.dd-hover-button {
color: black;
}
 
.dd-hover-column:hover .dd-hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
 
.dd-hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
 
.dd-hover-column:hover::before {
opacity: 0;
}

And there you have it! You’ve successfully created a stunning, seamless hover grid effect in Divi that beautifully reveals background images and dynamically updates module styles on interaction. This technique is fantastic for portfolio sections, service grids, team member displays, or any area where you want to add a layer of interactive polish.

Experiment with different transition timings, image choices, and hover styles to perfectly match your website’s aesthetic. If you followed along with the video and code, you now have a powerful new tool in your Divi design arsenal.

Happy designing!