New: Hover Animations in Thrive Architect (Part 2)

David Gavrilut   46

Recently, we added a feature called "Hover Animations" in Thrive Architect

Those hover animations allow you to make Thrive Architect elements change their behavior when visitors hover their mouse cursors over them, like this: 


A button that uses "classic" hover animations.

Now, we have expanded this feature allowing you to apply hover animations to the background of elements, like this: 

A column layout that uses the new background hover animations feature.

To see how this exact animation was created, don't forget to check out the video at the top of the page!

How Do the New Animations Work?

In Thrive Architect, there are a few elements that share the "State" option (Content Box, Background Section, Button element, etc.):

Not all of the elements have the "State" option.

The "State" option consists of the "Default" and "Hover" states.

When selecting the "Hover" state, you determine what happens to an element when the visitor hovers his mouse cursor over it. 

The elements that share the "State" option also use the "Background Style" option: 

Only a few of the elements use the "Background Style" option.

The "Background Style" option is used to asign a color, an image, a gradient or a video (in some cases) to the background of your element. 

To apply an animation, you must access it by clicking "Hover" State > Animation & Action > CSS Animation, and then in the drop-down menu, look for the section called "Background":

This is where you will find all of the background hover animations.

What Can You Build with It? 

In the video found at the top of the page, we used background animations to create a page using a multiple column layout to show off your team or company staff.

Here's how one of the images from the column looks like:

A Content Box element using a background image, a Text element and a background hover animation.

Let's see how you can build something similar:

1. Add the "Columns" element, place a Content Box inside a column and add a Background Image:

Add the "Columns" element and choose the number of columns you want to use on your page.

Add a "Content Box" element in one of your columns.

Go to "Background Style" options in your sidebar and add an image.

​2. Add Some Text Inside the Content Box and Customize It:

Add a Text element inside the content box and customize it to your heart's desire.

​3. Set the Opacity of the Text to 0%:

In the "Default" state, set the opacity to 0% in order to make the text disappear.

4. Access the Hover State and Set the Text Opacity to 100%:

Click on "State" and select "Hover".

Go to "Typography" and set the opacity of the text to 100%, because you want it to be visible on hover.

5. Remove the Background Image (On Hover):

On "Hover", go to the "Background Style" sidebar options and remove the image.

6. Add a Background Color (Minimize the Opacity for a Cooler Look):

From the "Background Style" options, add a color, and minimize the opacity (for a cooler look).

7. Add the Background Hover Animation

Your final step is to go to "Animation & Action", select "CSS Animation" and choose your desired background animation.

8. Repeat the Process for the Other Columns

NOTE: The hard part is done because you don't have to do the previous steps all over again. Instead, you can just duplicate the finished content box, move it into your other column(s), and then replace its image:

Duplicate the finished content box.

Move the duplicated Content Box in the other column and change its name & title.

In this way, you can create as many columns you want in very little time!

As far as the animations are concerned, feel free to take each animation apart and test it until you find the one that fits your website best!

It's Your Turn

How are you planning to use the new animations? Let us know in the comments below!

by David Gavrilut  August 28, 2018


Enjoyed this article ?

You might also like:

Leave a Comment

    • I’m glad to hear that, Jenette! You can create something cool on your website too, using mostly the same techniques πŸ™‚

  • Thanks for this addition, I’ve been trying to find a plugin to do exactly this hover option wondering why Thrive didn’t have it already ????????

    • Then I’m glad you didn’t find another plugin for this πŸ™‚ Stay tuned, there are lots of new features coming your way!

  • Can I add hover effects to the grid of featured images that display on my blog home page, on my blog category archive pages, and on my blog tag archive pages?

    • Unfortunately, no, if you are reffering to the Post Grid element in Thrive Architect.
      However, if you really want to use animations, you can build a featured grid yourself, similar to the one presented in this article. Only, instead of pictures with your staff, you can display featured images from your blog posts, and then link each content box to their corresponding blog post.

  • Great! Only seems to work in content boxes though, not background sections (for me at least). Would love a fade effect (or something a bit more gentle than all the exciting bouncy effects) to be added.

    • Hi, Sophie!
      Yes, the Background Section element doesn’t have the “Animation & Action” option.
      Regarding the “fade effect”, when you apply a background color on hover, you can lower the opacity even more (to something like 30%). This will give you a much more subtle effect πŸ™‚

      • thanks for getting back to me. Hmm well yeah you can lower the opacity but the animation (slide, sweep, etc) is still pretty sudden – only suitable for certain type of sites.

      • Yes, that’s a good point. I’ll have a discussion with the team about this.

  • Thanks – that’s great. Do you have a suggested work around for mobile where there is obviously no hover? Thx

    • Hello, Suze!
      Well, that depends. For example, in the case of the layout that I built in this post & video, if I access it from a mobile device and I press one of the content boxes, the hover animation appears.

      However, if I would’ve had links on those content boxes and I would press on one of them, I would be sent straight to that link, without seeing the hover animation anymore.

      So if you have links, I would suggest using the “Responsive” option to only edit on mobile, skip the animations and just add a background color/gradient with a 30-50% opacity on top of the image πŸ™‚

  • If I add a link to some of the text, when I go to edit the “hover” effect (and remove the opacity so it shows up) the control only impacts the standard non-linked text and I cannot access/edit the linked text. Is that expected?

  • Wow super helpful! I’m a long time user and continue to learn new ways to build with your software. Keep up the great work

  • Love love love this I was looking today for a plugin and then I remembered your email this morning. I’m going to use it on a dog supplement site so when you hover over a picture of the ingredient you get the information about it. yayayayaya. Love you guys.

  • I’d love a constant animated element that repeats smooth subtle movement… for example buy buttons that always slowly puls or even for a down arrow just above the fold that entices a user to scroll down a page more.

    • We have the option of applying these types of animations to elements, when they come into view.

      So, for example, in the case of a button, go on the sidebar, select Animation & Action > CSS Animation and from the drop-down, look for the “Modify” section. There, you can either make the element grow or shrink whenever it comes into view.

  • Really useful post David! I can already think of a few uses for these hover effects that I would have previously used a plugin for. And I love the use of animated gifs as they’re easier to load than videos. Thanks!

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}