How to Add Elegant Hover Effects to Divi Modules

Deprecated: Function create_function() is deprecated in /home/divilover/domains/ on line 2033

Simple and Attractive Hover Effects in Divi

Last week I shared with you an About Me Page Layout. If you haven’t seen it yet, you can check it out here! And while you’re at it, look closely at the hover effects I’ve applied in the layout.

Today, I will show you how to achieve these hover effects with simple CSS code snippets. You can watch the video to see how to apply these hover effects to your Divi-based website. And you can find the CSS code and short explanations in the tutorial below. So let’s hover!


1. Divi Button hover effect

There is a lot you can do in terms of button hover effects and that’s probably something I should discuss in a separate article. But here we’re going to make two specific changes: we’ll subtly increase the size of the button and add a shadow to make a fun 3d effect!

When you hover over it, the button grows bigger and looms closer, like it’s jumping over the background.

You can apply this CSS to any module, because making it bigger and adding a subtle box-shadow on hover is always nice.

If you add a custom CSS class of dl-hover-grow to your module, this is the CSS you can use:

.dl-hover-grow:hover {
	transform:scale(1.05) translateY(-3px);
	box-shadow:1px 15px 35px -10px rgba(0,0,0,0.4);

2. Hover effects on Divi Columns

Look at the “What I do” section. Each column consists of two modules: blurb (for the icon) and text (on a separate background). But when you use this hover effect, it creates the illusion that each column is one element. It creates a clean, uniform look. And you can have fun making those columns jump!

If you add a custom CSS class of dl-column-up to your row, this is the CSS you can use:

.dl-column-up .et_pb_column {
	transition: all .3s ease-in-out;
.dl-column-up .et_pb_column:hover {

3. Changing one element while hovering over a Section

You can add a hover effect to the whole section or row in such a way that it’ll affect just one element within it. Take a look at “Recent Project” in the layout. When you hover over one row, only the image changes. What’s exceptional about it is that the hover effect on the image will be activated whenever you place your cursor within the row. It doesn’t have to go directly over the image.

You can achieve this by adding a CSS class of dl-row to the row and targeting module inside that row, like that:

.dl-row:hover .et_pb_module {
	/* your CSS */

Reverse Image Filters on Hover

Now, that’s a fun idea! You’ve probably been wondering how I achieved this coloring-in hover effect in this section. No, I haven’t added any complicated custom CSS to create this effect. Instead, I’ve reversed the process.

You can add some filters to the image the way it’s normally displayed using Divi Module options (I decreased the saturation and opacity and added some blur), and simply remove the filter on hover using the simple CSS declaration: “filter:none;”. This way, your image will magically unblur and color-in on hover!

This is the CSS that removes image filters while hovering over a row with a class of dl-row (and also removes the filters on mobile):

.dl-row .et_pb_image {
	transition: all 1s ease-in-out;
.dl-row:hover .et_pb_image {
	filter: none!important;
@media (max-width:980px) {
	.dl-row .et_pb_image {

5. Hover Effects for Element Inside a Module

If you want to add a hover effect to just one element inside a module, like an icon in a blurb or a social media icon, you need to use your browser’s Inspector (Developer Tools). We do this to check the CSS class of the element you want to change on hover. The custom CSS class which we’ll be adding in the Advanced Tab will affect the whole parent container. And we don’t want the whole blurb to change – just the icon.

This is the CSS used in this example. Blurb have a custom class of dl-blurb and a Social Follow module dl-social:

.dl-social li a.icon:before {
	transition: all .3s ease-in-out;
.dl-social li a.icon:hover:before {

.dl-blurb .et-pb-icon {
	transition: all .3s ease-in-out;
.dl-blurb:hover .et-pb-icon {

Final thoughts

Hover effects are so much fun! But no matter how much you love them, remember to be subtle and consistent. These microinteractions are useful and attractive, but if you overdo them, the effect may work against you.

What do you think about these hover effects? Have you tried some of them? Let me know in the comments!

License Details


Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.


Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.


Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements


  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)


  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module


  • allow_url_fopen