How to Create Floating Overlapping Images in Divi

h
Divi Tutorials
v
comments (11)

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!

Download This Layout Live preview

Free Resources for Divi Lovers

Access this layout and dozens of other freebies - available exclusively for newsletter subscribers.

New here?

Join the newsletter to unlock the Freebie Library and get weekly Divi tips, tutorials, and design goodies.

Join the newsletter

Already subscribed?

Go straight to the Freebie Library and download this layout - plus lots more!

Access Freebie Library

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!

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!
Divi Lover Shop

11 Comments

  1. Romeo
    Romeo on 2023-05-19 at 14:18

    Hello Ania,

    The subscribe form is not available, and link takes me to 404, could please assist.

    Reply
    • Edyta Zimny
      Edyta Zimny on 2023-05-22 at 11:55

      Hi Romeo! Yes, the form was faulty for some reason, thank you very much for bringing it to our attention! It should be working now 🙂

      Reply
  2. Nick
    Nick on 2022-09-28 at 15:19

    Thanks Ania, a nice easy-to-follow tutorial with a big impact!

    Reply
  3. Hugatron
    Hugatron on 2022-02-24 at 23:02

    Brilliant, yet so simple. Thanks for sharing.

    Reply
  4. Hamid Behzadmehr
    Hamid Behzadmehr on 2021-04-01 at 22:03

    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
      Ania RomaƄska on 2021-04-02 at 12:31

      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
  5. Bjarne
    Bjarne on 2021-02-16 at 19:42

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

    Reply
  6. Mike Uhrhammer
    Mike Uhrhammer on 2021-02-16 at 17:37

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

    Reply
    • Ania RomaƄska
      Ania RomaƄska on 2021-02-16 at 18:05

      You’re welcome. Glad you like it!

      Reply
  7. Will
    Will on 2021-02-16 at 17:10

    Awesome, I have a use for this immediately.

    Reply
    • Ania RomaƄska
      Ania RomaƄska on 2021-02-16 at 18:05

      That is great to hear! 🙂

      Reply

Submit a Comment

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

Enjoing our content?

You might find this interesting...

Check out Recommended ‹Divi & Web Resources

See the list

Learn Divi Theme with our Practical Guides

See courses

Meet Divi Lovers and Join Our Community

Learn more

Jump Start Your Project with a Premium Child Theme

Browse Themes

More from the Blog

More tips & tricks for Divi Lovers

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

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.
Join the group

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Submit a ticket

Ask Ania?

Submit a question for the next live Q&A session.
Submit a Question

Consult fellow students?

Join the conversation inside our private FB group.
Join the group