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:
More...
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!
Really like how you hosted in youth so can watch at 1.5 speed. Thank you
Hosted in Youth? What does this mean?
Guessing YouTube 😉
I love that you show us how to create your example.
I’m glad to hear that, Jenette! You can create something cool on your website too, using mostly the same techniques 🙂
Excellent and very well presented. Thank you.
Thank you very much, Alex! 🙂
PS.
Sorry, Thank you David 🙂
This is fantastic! I was thinking about asking for and you beat me to it.
Haha I’m glad to hear that, Sharon! Enjoy 🙂
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.
I agree Sophie some more gentle effects would be nicer.
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 🙂
Thx David. I guess I could also animate so it transformed only when it came into the viewport.
Yes, exactly. That is another good solution 🙂
I love it! This is creative and timely. Thanks for making it so simple!
Thank you, Felix! 🙂
thanks
Our pleasure 🙂
9Excellent and very well presented. Thank you too 🙂
Thank you, Vicente! Enjoy 🙂
easy and – as always – a brilliant solution. Thank you for the explanation
I’m glad to hear that, Philipp! Enjoy 🙂
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?
Hi, Mark 🙂
In this case, could you please open a Support request for this issue? Just so that we can have a closer look at what exactly happens.
OK David, will do so immediately, thanks.
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
I’m really glad to hear that, Kyle! 🙂
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.
That’s awesome, Jennifer! I’m sure you’ll build a great looking layout 🙂
Great stuff, thanks!
Our pleasure, Marcus 🙂
This is excellent. As someone who doesn’t know how to code, I love how easy it is to implement these feature using Thrive. Thanks guys, keep up the great work!
I know exactly what you mean, Katarina 🙂 Enjoy!
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!
Really glad to hear that, Hugh! And I love using gifs too 😀