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.
Get FREE Divi tutorials and layouts each month!
Join 400+ Divi enthusiasts and level up your web design game!
Thanks for this Andy! It’s an excellent tutorial.
Thanks, it works fine but bottom image is always aligned to left, I can’t find the way to move it to center or right, nothing works 🙁 Please help!
Are both images the same size? Could you provide a link for me to look at?
I can’t, the site is under construction. And yes, they’re both exactly the same size. I tried this in 3 different rows and it’s always the same, bottom image is always stuck to the left.
Thanks for the reply! Hard for me to say exactly what’s going wrong without a link unfortunately. What size are the images?
Same problem here (Dorota). Thanks for your tutorial though.
Hi, I am also having the problem with my bottom image aligned to the left. Exact same size, exact same image, just 2 different colors. I can PM you the link, since it is a test site.
Hey Elise! Could you send me a link to [email protected] and I’ll take a look?
I’m experiencing exactly the same problem as the others. The bottom image automatically aligns to the left and there’s nothing I can do to fix the problem. Both the top and bottom images are exactly the same size. I can email you a link to the page if you want to take a look.
I found that using this solves the problem of the image aligning to the left:
.bottom-image {
position: absolute !important;
left: 50%;
transform: translate(-50%, 0);
}
My problem is that I’m putting two partly transparent .png images over top of each other with a larger image background behind them. When I add “opacity: 0;” to the bottom-image CSS code and then “”opacity: 1;” to the bottom-image hover code, the bottom image just disappears completely. Opacity in the normal class code seems to over-ride the hover code.