Make a Divi Image Module Gently Bob Up and Down

|

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

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.