How to Create Floating Overlapping Images in Divi

Updated for Divi 5: the floating CSS works in Divi 5 without any changes (I tested it on a Divi 5.18 page). The only thing that moved is the place where you add the CSS class: in Divi 5 it's Advanced ➜ Attributes.

How to create floating images in Divi

Give a module the CSS class dl-floating and add a short CSS animation that moves it 15px down and back up every 7 seconds. Two extra classes start the animation at a different moment, so the images don't float in sync.

Animated images are a great feature that will distinguish your Lead Magnet Opt-in Page from others. In this tutorial, I will show you how to use the Divi Builder to float elements and add life-like movement to your content.

We are going to use a simple CSS animation to achieve that. Watch my step-by-step walkthrough video and make your images more engaging.

The video was recorded in Divi 4. The CSS is exactly the same in Divi 5; only the CSS class field moved (see Step 1 below).

How to make images overlap in Divi

Put the images in one column and set two of them to Position: Absolute (Advanced ➜ Position), each pinned to a different corner, while the third image stays in the normal flow. The absolute images can then sit on top of (or under) the main image.

This is how the images are set up in my opt-in page layout:

• The main image (Max Width 60%, centered) stays in the normal flow and gets the classes dl-floating dl-floating1.
• The second image (Max Width 50%, top margin 70px) is set to Position: Absolute in the top left corner of the column, with the classes dl-floating dl-floating2.
• The third image (Max Width 50%, top margin 50px) is set to Position: Absolute in the top right corner, with the class dl-floating.

Absolute images don't take up space in the column, so the column is as tall as the main image. If you want a different image on top, change its Z Index (Advanced ➜ Position ➜ Z Index, the same place in Divi 5 and Divi 4).

How to add the floating CSS animation in Divi

Add the class dl-floating to every module you want to float, then paste the CSS below into Divi's Custom CSS. It works on any module (and on rows, columns or groups), not only on images.

If you'd like to recreate this layout yourself, it's very easy. Add a CSS class of dl-floating to a module, and then use this CSS to make it float!

Step 1: Add the CSS class

Open the module settings and go to Advanced ➜ Attributes ➜ Add Attribute ➜ CSS Class (Divi 4: Advanced ➜ CSS ID & Classes ➜ CSS Class). Type dl-floating. For the extra delay, add a second class separated with a space, for example dl-floating dl-floating1.

Step 2: Copy the CSS code

Paste the CSS into Divi ➜ Theme Options ➜ General ➜ Custom CSS to use it on the whole site, or into the Page Settings of one page (in Divi 5: the gear icon in the top-left corner ➜ Page Settings ➜ Advanced ➜ Custom CSS). You can also put it between <style> tags in a Code module, which is what I did in the free layout.

@keyframes floating {
    0% {transform: translate(0, 0px);}
    50% {transform: translate(0, 15px);}
    100% {transform: translate(0, 0px);}
}

.dl-floating {
  animation: floating 7s ease-in-out infinite;
}

.dl-floating1 {
  animation-delay: -4.5s;
}

.dl-floating2 {
  animation-delay: -3s;
}

/* No floating for visitors who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .dl-floating {
    animation: none;
  }
}

Additional CSS classes: dl-floating1 and dl-floating2 use an animation delay, so that the module floats in an opposite direction. The negative delay starts the animation part-way through, so the image is already moving when the page loads.

The last rule is new: it switches the animation off for visitors who turned on "reduce motion" in their device settings. It's a small thing that makes your site friendlier, and you can read more about it in my Divi accessibility tips.

Step 3: Adjust the movement

Change 15px in the keyframes to make the images float higher or lower, and 7s to make the movement slower (bigger number) or faster (smaller number). Keep it subtle: a gentle float looks elegant, a fast bounce looks nervous.

One thing to know: the animation uses the CSS transform property, so while it runs it replaces the module's own Transform settings (Design ➜ Transform) and its Scroll Effects motion. If you need both, put dl-floating on the parent column or group instead of the module.

Get the free Lead Magnet opt-in layout pack

The floating images come from my free Lead Magnet Opt-in Layout Pack for Divi: three pages for your lead magnet (an opt-in page, an e-mail confirmation page and a download page) with the floating CSS already included.

Take a look at the live preview to see the images float.

You'll find all the details about the pack (and how to connect the opt-in form to your e-mail provider) in the post about the free Lead Magnet opt-in page layout pack.

Want overlapping images that move as you scroll instead? Check out my tip on Divi Scroll Effects with Transform on hover.

Hope you enjoy this quick CSS tip! I always appreciate your feedback, so let me know what you think in my Divi Lovers Facebook group.