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.
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.
First, we click on the gear icon to go into the settings, then background, and change the section background color to black.
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”.
Then I go into my Custom CSS and entered the following code:
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.
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.
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.
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:
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.
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.
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.
So what does that mean?
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.
Let’s go ahead and add a Background Image. We see the image because we haven’t added a blend mode yet.
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.
And now when we hover, and we change the black to a color value, you see the image emerge. Pretty cool, eh?
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.
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,
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.
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.
-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.