How to Make CSS Animated Images in Thrive Architect

In this tutorial I'm going to show you how to quickly and simply create an image that looks animated image using nothing but Thrive Architect. That's right - NO plugins, NO special javascript, NO extra tools whatsoever.

More...

The idea for this tutorial came from a Facebook group where someone asked if it was possible to create an image like the one on AccuRanker's current homepage. Let's take a look.

We have a SVG image as the base or background image, and around it are several circles that appear to float or bob up and down. 

Take a look below and you'll see that I have recreated a version of this image.

Let's take a look step-by-step and see how this was done. Before, please note that I am NOT a CSS expert! I'm self-taught and I tinker until I figure things out. This is how I did it, and I invite you to teach me a better way if you figure one out.

Creating an Animated Image in Thrive Architect

Follow these simple steps to create an image that is animated AND interactive in Thrive Architect.

Step 1: Add the base image using a simple image element inside of a content box element.

Step 2: Add a new content box (inside the original) for each of your images. If you have three images, add 3 content boxes. Now add each additional image inside its own content box. I'll explain why we're doing it this way later. I prefer to place them above the original image.

If you're following my example you should now have a content box with the base image inside, and 3 content boxes above that image each with their own images inside them.

Now it's time to "animate" them!

Step 3: Add a custom HTML element to your page and add the following CSS code. This CSS is how we will "animate" the images. 

Click here to see the code

Let's break this code down real quick to give you a very basic understanding of what's going on.

We're first defining our "floating" animation parameters. Where the image starts, goes to next, and where it's at when it ends.  You can adjust your float heights here.

Next we're creating a variable for each image that we want to animate. I called these "floaty1, floaty2, floaty3, etc." Why a different variable for each image? If you notice in the example, each image is floating at its own pace/time. So we want a place to define them separately. Here you can adjust the delay in start times or times it takes to complete the animation so that they are not all in sync.

The last piece of our code is defining the "turning" effect when you hover over the icons. Play around with it until you get your image looking just right! 

Step 5: Use Absolute Positioning (under Layout & Position) to place your animated images where you want them on your base image.

Okay, now here's where things get a little tricky.

Step 4: Apply HTML Attributes to the Image Elements and Content Boxes. In my example I gave the content boxes the "turny" class, and I gave the images each one of the floaty classes (floaty1, floaty2, floaty3).

Note: Sometimes you must save and reload the page before they will render properly in the Thrive Architect Editor.

Step 5: Make any final adjustments to positioning. You may wish to adjust your mobile view as well BEFORE animating the images.

That's all there is to it! You can now create animated and interactive images in Thrive Architect without having to know any Javascript or use an additional plugin.

Cool Tip: You can utilize these floating images ANY way you normally would in Thrive Architect. Want to make them a link to a page? Add a link. Want to add a hover effect? Use Thrive's hover effect. That's what's SO COOL about using Thrive Architect to do this and not just using CSS.

If you have any questions, please feel free to leave a comment. 

  • Javier says:

    Whoaaaa I didn’t know you could do this kind of things with Thrive Architect! Thank you very much!!!!

  • Awesome, thanks!!!

  • Used this on a few of my sites works really well, thank you.

  • >