Having an image which changes on hover is a cool effect, but unfortunately it’s not a native feature of Divi. Luckily though with a little bit of CSS it’s an easy effect to build yourself.

In part 1 of this tutorial I’ll walk you through step-by-step on how to create a staff section with images which swap on hover, like the one in the demo above. In part 2 I’ll show you how to do just the hover image swap effect, without the rest of the section, to be used in other parts of your website.

Before moving forward I should mention you won’t be able to build this in the default Visual Builder. This is because we’re creating two images stacked on top of each other, which makes it so you can’t edit either image in the default Visual Builder. Instead we’ll be using the “Wireframe View” version of the Visual Builder.

If you’d like to skip the tutorial and just download the above layout, you can download the JSON here.

Part 1

Staff section with image swap hover effect

Step 1: Create a new page, open the Visual builder, click the purple button at the bottom with the 3 dots, then in the bottom left corner click the icon highlighted in the image below:

Step 2: Create a section with a 3 column row. Give the section a background color of #F5FBFF.

Step 3: In the Advanced tab of the row, add the class “staff-image-swap” to the CSS class box.

Step 4: Add an image module and upload your funny image. Then, in the Advanced tab of the module, add the class “funny-image” to the CSS class box.

Step 5: Add an image module below the funny image and upload your sensible image. Then, in the Advanced tab of the module, add the class “sensible-image” to the CSS class box.

IMPORTANT: For this effect to work, both the funny and sensible image should be the exact same dimensions. In this example I’m using a square image.

Step 6: Add a Person module below. Style this how you’d like. For this example I’m using the following settings:

Icon color: #ff3365
Text align: center
Title Font: Noto Serif
Title Font Weight: Bold
Title Text Size: 26px

Step 7: Repeat steps 2-5 for the other 2 columns.

Step 8: Save & Exit the visual builder.

IMPORTANT: At this stage you’ll have two images stacked on top of each other vertically, so I wouldn’t recommend doing this on a live page. Saying that, I wouldn’t recommend doing any sort of experimental updates on a live page!

If you are, then do this step after step 10.

Step 9: Add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options):


/*===== Staff hover image swap effect =====*/

.funny-image {
position: absolute !important;
}

.sensible-image {
opacity: 1;
transition: all 0.4s;
}

.staff-image-swap .et_pb_column {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0px 4px 14px rgba(98,118,140,.05);
transition: all 0.4s;
}

.staff-image-swap .et_pb_image {
margin-bottom: 0 !important;
}

.staff-image-swap .et_pb_team_member {
padding: 30px 20px;
}

.staff-image-swap .et_pb_column:hover .sensible-image {
opacity: 0;
}

.staff-image-swap .et_pb_column:hover {
box-shadow: 0px 4px 14px rgba(98,118,140,.1);
}


Step 10: Save the CSS settings and you’re done!

Part 2

Image hover swap effect

In this part I’ll show you how to re-create the hover effect below:

Step 2: Create a section and add a row with your desired column structure.

Step 3: Add an image module and upload your bottom image (the image that appears when you hover). Then, in the Advanced tab of the module, add the class “bottom-image” to the CSS class box.

Step 4: Add an image module below the bottom image and upload your top image (the image which is visible by default). Then, in the Advanced tab of the module, add the class “top-image” to the CSS class box.

IMPORTANT: For this effect to work, both images should be the exact same dimensions. In this example I’m using a square image.

Step 5: Save & Exit the visual builder.

IMPORTANT: At this stage you’ll have two images stacked on top of each other vertically, so I wouldn’t recommend doing this on a live page. Saying that, I wouldn’t recommend doing any sort of experimental updates on a live page!

If you are, then do this step after step 7.

Step 6: Add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options):

/*===== Hover image swap =====*/

.bottom-image {
position: absolute !important;
}

.top-image {
opacity: 1;
transition: all 0.4s;
}

.top-image:hover {
opacity: 0;
}

Step 7: Save the CSS settings and you’re done!

Let me know if you have any questions in the comment section below! Or feel free to drop me an email at: [email protected]

You can also checkout more Divi tutorials below.