Hey, Divi People this is John from Divi Ready Themes, and in this tutorial, I’m going to show you how I stumbled upon a solution for creating hover effects for Divi sections and rows using background colors, image blends – and of course, a little CSS.

I’ve seen the section and hover effects on other sites and I wanted to create the same thing for my Home page and for some of my child themes.

The look that I am going for you can see on my home page and on my new theme Ghost Hunters. These are the effects I was trying to create.

Divi Ready Themes Video Tutorial

So, let’s go into the Divi Visual Builder, and we see that there is already a standard section set up with an empty row.

I’m going to create 2 new sections just to space out the page and we’re going to work on this middle section here.

Divi Tutorial

First, we click on the gear icon to go into the settings, then background, and change the section background color to black.

Adding Color to Divi Section

While we are here let’s jump to the Advanced tab, CSS ID and Classes and let’s give it a CSS Class name of drt-hover”.

Settings tab Divi Advanced

Then I go into my Custom CSS and entered the following code:

.drt-hover:hover {

background-color: #ff22e2 !important;

}

Let’s save everything and go back to our page. Save that as well and do a refresh. Now at this point, when I was first trying to get this effect, I thought that was all I needed to do. But as you can see, when I tested it. It didn’t work – and I’ll show you why.

Make your Divi Websites Shine with these Custom Section Hover Effects! Click To Tweet

If we right click the section, then go to Inspect, we can see that when Divi sets the background color, it automatically gives it’s an “!important” tag. So no matter what we enter in the customs CSS section, it’s not going to make a difference.

Chrome Inspect Divi Section

But if we remove the !important tag, I’m not sure if you can see it here but once the important tag is removed you will see that the hover effect works perfectly.

Divi Section Effects CSS

So how do we get around this? One more line of CSS code.

Let’s close the inspector and refresh our page. Let’s get it back to it’s non-working status. Let’s open the Visual Builder and go back to our section settings. Let’s remove the black background and save. With the background removed, you will see that the hover effect is now working again.

What we need to do, since we can’t let Divi apply the background color for us, we are going to apply it ourselves with a little line of CSS code. Let’s go back to our Custom CSS section and enter the following code:

.drt-hover {

background-color: #fff;

}

Let’s save that and go back to our page and do a refresh. The black is back and the hover effect works perfectly.

It was at this point that I got an idea. I’ve been using Photoshop since it was a baby, so I know all about the Image Blends that are now included with Divi for image layers, and how colors react differently in different modes. Let’s jump over to PhotoShop and I’ll show you this concept.

I have a document here with 2 layers. The background is filled with Black and in the layer above that I have an image.

Image Blends in Photoshop

If I set the image to an image blend of Multiply, you will see that the image disappears. That’s because anything multiplied onto black will turn black.

Photoshop image blends

But if I go in and raise the value of the background color – you will see the image start to emerge. The higher in value we go, the clearer the image.

Photoshop Image Blend Effects

So what does that mean?

Get a Jumpstart on your next Divi project with Divi Ready Themes! Premium Divi Child Themes and Layouts. Click To Tweet

That means we can use the same trick in Divi. Let’s jump back to the Visual Builder. If I go to the section settings you will see that Divi sets up its own layers. You have the background color, then the blend layer and then the Image Layer.

Divi Section Settings

Let’s go ahead and add a Background Image. We see the image because we haven’t added a blend mode yet.

Divi Section Hover Tutorial

Go down to the Background Image Blend section and change to Multiply. The same exact thing happens as it did in Photoshop. We have multiplied the image onto a black background and it disappears.

Divi Hover Effects

And now when we hover, and we change the black to a color value, you see the image emerge. Pretty cool, eh?

Star Background for Divi Tutorial

Let’s try something different. Let’s go back to our Custom CSS and change the color values. Let’s make our background color a hot pink and the hover background a white.

.drt-hover:hover {

background-color: #fff;

}

.drt-hover {

background-color: #ff22e2;

}

Let go back to the Visual Builder. Let’s change our background image and set the blend to Darken. This gives us this cool image effect,

Hover effects for Divi Sections

and when you hover over it, the image changes to its original look. This is because when you Darken an image onto a white background – it looks normal.

divi child themes

Let’s add one more thing to the Custom CSS. The hover effect kind of snaps on and off. Let add these 2 lines of code to give it a bit of a transition.

.drt-hover:hover {

background-color: #fff;

}

.drt-hover {

background-color: #ff22e2;

   -webkit-transition: background-color 0.3s ease-in-out;

   -moz-transition: background-color 0.3s ease-in-out;

}

Back on our page, let’s just save and exit the visual builder and you can see the hover effect now has a nice transition.

Well, that’s it. I hope you enjoyed this video. If you did please take a moment to like and subscribe. Don’t forget to check out our amazing selection of Divi Child Theme and Layouts.

This is John, from Divi Ready Themes and I’ll catch you on the next video.

Video Tutorial: Step by Step Instruction on how to Create Stunning Divi Section Hover Effects without a ton of CSS. Click To Tweet

Subscribeand Save 25%

Subscribe to our Mailing List and get discount coupons, new Divi templates, freebies, Video Tutorials, articles and more - sent right to your inbox!

You have Successfully Subscribed!

Pin It on Pinterest