Those hover animations allow you to make Thrive Architect elements change their behavior when visitors hover their mouse cursors over them, like this:
Now, we have expanded this feature allowing you to apply hover animations to the background of elements, like this:
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.):
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:
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":
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:
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:
2. Add Some Text Inside the Content Box and Customize It:
3. Set the Opacity of the Text to 0%:
4. Access the Hover State and Set the Text Opacity to 100%:
5. Remove the Background Image (On Hover):
6. Add a Background Color (Minimize the Opacity for a Cooler Look):
7. Add the Background Hover 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:
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!