Creating a floating effect on an image in Divi can add a dynamic and engaging touch to your webpage. In this guide, we will walk you through adding a floating effect to an image module that gently rises and falls to create a subtle bobbing motion.
Step 1: Add the Custom CSS
First, you need to add the following CSS to your site. You can do this in your child theme's style.css file or in the "Divi Theme > Options > General > Custom CSS" box.
/* Floating hover effect with two heights */
@keyframes float {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-10px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-7px);
}
100% {
transform: translateY(0);
}
}
.floating {
animation: float 6s ease-in-out infinite;
}This CSS code defines a keyframes animation named float, which transitions the image to a high and then to a slightly lower position, and then back to the original position repeatedly.
Step 2. Add the Class to Your Image Module
To apply the floating effect to an image, you need to add the class floating to the image module in your Divi Builder. Here are the steps:
- Open the Divi Builder and locate the image module you want to animate.
- Click on the settings icon (cogwheel) of the image module.
- Navigate to the Advanced tab.
- In the CSS ID & Classes section, find the CSS Class field and enter
floating. - Save your changes and exit the settings.
Step 3. View the Result
After incorporating the CSS and applying the class, view your page. The image should now exhibit a gentle bobbing effect, subtly moving up and down.
0 Comments