Translate up content of an element

We are using this template in this article, download it or simply use your own

In this post we will do a basic hover animation, we want to translate up content of an element when the user hover over it to show more info.

Section number five (Content 3-6) there is three blocks (Branding, Web Design and SEO) inside each on them there is an icon, heading and paragraph, let’s duplicate the paragraph, we will see that it looks bad, select the div inside the Column (.feature-box) go to the PROP panel, create new style inside custom.css and set the height to be fixed 380px and overflow to be Hidden. The second paragraph is now hidden, we want to animate this section up to see the second paragraph when we hover it.

First add another div with class .feature-box-content-container inside the .feature-box div and make it the direct parent of all feature box elements.

Translate Element Up - On Hover - Add Feature Box Content Container

We’re doing that so we can add the animation settings to the feature box and animate all the content in the same animation setting.

Now select the feature box div, go to the ACT click on Animation 1, set the trigger to Hover and the target to > .feature-box-content-container the grater than sign (>) means effect only the selector inside this element (doesn’t has to be direct child). Under the ANIMATION STEPS section change the Step 1 to transform:translateY(-100px); and under the HOVRE OUT section change the Step 1 to transform:translateY(0px);

Translate up content of an element - On Hover - 1

Translate up content of an element - On Hover - 2

Translate up content of an element - On Hover - 3

The animation in the two other blocks will be the same. Save it and test it !.

Leave a comment

Your email address will not be published. Required fields are marked *