How to Create Floating Overlapping Images in Divi + Free Opt-in Page Layout!

[@Ma-fp4px]

This is the kind of content creator we were looking for. Much love from USA.

[@aniaromanskacom]

Thank you for your kind words!

[@g3radiosocial]

Thank you, Ania, for yours fantastic tutorials. I follow you and at my 62 years old I am creating a lovely web for my streaming radio. Thank you so much.

[@aniaromanskacom]

Thank you, glad I could help!

[@demavares]

2023 and still valid. Thank you very much I always wanted to do that effect. Greetings from Venezuela.

[@aniaromanskacom]

So glad I could help, thank you!

[@sebastiangimeneznancilla9418]

Thanks, Ania, I`m started with Divi and your videos are very clear and super helpful. I like it when you say lovely when you finish something. From Spain

[@aniaromanskacom]

Thank you Sebastian! That's really nice of you :)

[@hupka3145]

You are legendary! Perfectly explained, clear, simple and effective. Nicely done.

[@aniaromanskacom]

Thank you for your comment, I'm happy to hear that :)

[@sebastianmcmitre]

Beautiful and useful video! I am so grateful!

[@aniaromanskacom]

You're so welcome! I'm so glad it was helpful :-)

[@sonnyjsinishajanicijevic5436]

Great tutorial Ania, as always. I`m gonna use it on my portfolio website. I was looking for a solution like this. Many thanks 🙏🙏🙏

[@JonathanBaileyn2u]

Thank you so much for this explanation. I was searching for something similar.. not quite this advance.. but it helped me understand what I was trying to do.. therefore I learned both designs. Great tutorial! Sub'd

[@skeptimedia1093]

Thanks Ania, super helpful...and beautiful.

[@aniaromanskacom]

Glad it was helpful!

[@paulac.b.6510]

GREAT!!! It's just what I wanted to know. You are awesome! Thanks

[@aniaromanskacom]

Thank you too, Paula! I'm glad I could help 😊

[@HighSpiritsGuy]

Wonderful animation Ania. Please keep making such helpful videos.

[@aniaromanskacom]

Thank you. I will try my best ;-)

[@michaelfarmhand]

Thank you, that was helpful. Every blessing

[@aniaromanskacom]

Glad it was helpful!

[@satishp9283]

Ty, i was looking for it ... Nice video 😊

[@aniaromanskacom]

Glad I could help!

[@wilfredtan9648]

Thanks for the wonderful vid on animating with divi.

[@aniaromanskacom]

I'm happy you liked it!

[@urhorattel]

Ania, as always, your solutions are simple, cool and clearly explained!
You are great!
P.S. you look very good!

[@aniaromanskacom]

Thank you! I appreciate the kind comments! 😃

[@m.mashhoodansar4102]

Thanks Ania, this is really good. thank you so much.

[@aniaromanskacom]

I'm happy I could help 😀

[@MrDaudsuseno]

i just found chanel that usefull , thanks
its very helpfull of my job.
warm hug from indonesia ....

[@aniaromanskacom]

I'm glad it was helpful 😊

[@primal_aperture_photo]

I love your tutorials and have much respect for your talent for creating. I downloaded your pages as I was not having fun trying the CSS . Kept getting errors and got frustrated. Thank you I was able to make a great page with your layout which I'm very happy with.❤

[@aniaromanskacom]

I'm so happy I could help! Thank you

[@prithiviraj3348]

This is awesome stuff!! It worked perfectly well for me !! Please post more!

[@shawnaamit7103]

Wonderful, thank you so much :)

[@aniaromanskacom]

I'm glad you liked it!

[@Saitentanz]

This is really great! Now I begin to understand how these floatings work. Thank you for this tutorial, one more thumb up

[@aniaromanskacom]

Glad it was helpful!

[@alterovstudio]

you make wonderfull tutorials, thank you

[@aniaromanskacom]

Thank you for watching!

[@christyF444]

Thanks so much, it looks beautiful!

[@aniaromanskacom]

I'm glad you like it 🤗

[@anchordotmedia]

Great post, Ania

[@aniaromanskacom]

Thank you, Nathan!

[@gorank-seo9347]

excellent work, pls share more!

[@aniaromanskacom]

Thank you and more are coming for sure!

[@soul.rebel1986]

This is amazing and beautiful, thank you 🙏🏽

[@aniaromanskacom]

Glad you like it!

[@RalfTenbrink]

Great video. I learned a lot. Thanks very much.

[@aniaromanskacom]

Glad it was helpful!

[@JasperGuy]

I love how you explain it clearly. cool animation.

[@aniaromanskacom]

Glad it was helpful!

[@dicawp6106]

Incredible. I'm going to use it on my website.

[@aniaromanskacom]

Glad I could help!

[@whiskey7869]

I was thinking of implementing floating images in a new project so this has come at the perfect time, thanks! Subbed and looking forward to more videos.

[@aniaromanskacom]

Welcome aboard! Glad it was helpful :-)

[@jonidegu]

This is so helpful thank you so much!

[@aniaromanskacom]

You're so welcome!

[@giannisiliopoulos]

Nice Love your stuff... I ll utilize this one in one of my projects for sure. Weldone

[@aniaromanskacom]

Awesome, thank you!

[@JfDesigns]

Simple and elegant as always. Great job.

[@aniaromanskacom]

Much appreciated :-)

[@afepple1]

Very nice effect and very well explained. Thank you so much!

[@aniaromanskacom]

Glad you liked it!

[@nekomusic2293]

Great Thank God you still upload ❤️😘🙏

[@aniaromanskacom]

Thanks! More to come! ;-)

[@dstaedeli]

awesome Ania, thank you so much for sharing this so clearly!!

[@aniaromanskacom]

You're so welcome!

[@andymackk99]

Nice effect and well explained - subscribed :-) Thanks

[@aniaromanskacom]

Awesome, thank you!

[@AlDente-p4e]

Thank you very much!

[@VankillaVanil]

Jak zawsze świetna robota Ania ;)

[@aniaromanskacom]

Dziękuję :)

[@tjveach]

Great work my friend....

[@aniaromanskacom]

Many thanks :-)

[@tjveach]

@@aniaromanskacom I hope you realize how talented you are, you combine your coding skills with great design skills, a rare talent...my best to you Ania..

[@olgasummerhayes1353]

this is wonderful, thank you.

[@aniaromanskacom]

Thank you, Olga :-) Glad you enjoyed it!

[@eddyLama]

You are amazing; thanks for this

[@aniaromanskacom]

Thank you, I'm glad you found it helpful!

[@wreynoldz]

Amazing!

[@aniaromanskacom]

Thank you 😊

[@WitoldHojda]

Świetna robota ....

[@aniaromanskacom]

Dzięki! :-)

Perfect, more stuff!

[@aniaromanskacom]

Thanks! Will do! :-)

[@theconspiracytheory1821]

Love you so much.

[@aniaromanskacom]

Thank you 😄

[@HafizRahmanBD]

Amazing.

[@aniaromanskacom]

Thank you 😊

[@monikarzaca7685]

wielkie dzieki!

[@TheChameleeon]

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!

[@TheChameleeon]

Solved!

[@aniaromanskacom]

Thank you for watching! Glad you solved the issue :)

[@mdabullais2114]

Can we add parallax effect to those images?

[@ameerlatef]

Hello my beauty, I have been absent for a long time, I have missed you

[@aniaromanskacom]

Welcome back :-)

[@ameerlatef]

Do you have Facebook, Instagram, or anything to communicate with you?

[@_marcosnascimento]

If you're watching in 2023, instead of going to CCS, create a code space below the images, and wrap all the code between and , like this:
@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;
}
... rest of the code...