How to Create Floating Overlapping Images in Divi

Learn how to create alluring Floating Images in Divi to make your content more catchy and attractive!

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 Divi Builder to float elements and add life-like movement to your content.

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

This Awesome Opt-in Layout Pack for Divi is FREE for our subscribers!

Free Resources for Divi Lovers

Join our newsletter to get the good stuff!

We’ll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Sign up to download

Get access to this layout and all the free resources made exclusively for our subscribers!

Already subscribed?

Fill the signup form and if you’re on the list it’ll get you straight to the download page! 


Can’t see the form? Click here

Copy the CSS code!

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!

@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;
}   

Additional CSS classes: dl-floating1 and dl-floating2 use aan animation delay, so that the module floats in an oposite direction. Hope you enjoy this quick CSS tip!

We always appreciate your feedback, so let us know in the comments what you think!

Shares

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

8 Comments

  1. Hugatron

    Brilliant, yet so simple. Thanks for sharing.

    Reply
  2. Hamid Behzadmehr

    Hi, thank you for the tutorial. However I cant differentiate the animation delay with the CSS you provided! All of the three pictures float simultaneously!

    Reply
    • Ania Romańska

      Hello,

      Please feel free to downlad the layout and edit it to fit your needs if you have trouble following the step by step guide.

      Reply
  3. Bjarne

    Love it! Such a nice little touch drawing attention without being distracting, and something different from the standard Divi animations.

    Reply
  4. Mike Uhrhammer

    Super cool! Right up there with the Ken Burns Effect. Thanks Ania.

    Reply
    • Ania Romańska

      You’re welcome. Glad you like it!

      Reply
  5. Will

    Awesome, I have a use for this immediately.

    Reply
    • Ania Romańska

      That is great to hear! 🙂

      Reply

Submit a Comment

Your email address will not be published.

I want to stay in touch! I’d like to receive special offers and tutorials from Divi Lover. Sign me up for awesome content! I know that I can unsubscribe at any time.

Enjoing our content?

You might find this interesting…

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen