How to shift elements up while hovering a Box or Grid Cell

How To Shift An Element Up While Hovering a Group To Attract Visitors

Unlike changing the background color transition, the Shift-Up Animation applies a transition timing function to all elements in the group or grid. So the hover state of a specific element should not differ from the hover state of the other elements from this group. The group or grid is presented as a parent element in this structure. Because the same class elements can be in the group, it will improve user experience similar to social media practices. You can go beyond and apply the background color effect and the shift-up effect.

You can apply the shift-up hover effect for the group of elements. When the user hovers over a certain element from this group or grid, the hover effect is going to make the element move up and go back to the default value when a visitor is no longer hovering over. Go to the options panel on the right and pick hover on the group animations. Pick the shift-up animation and customize the scale, rotation, timing function, and transition property. This animation can be used for the same class elements. For example, social media icons will shift up when a user hovers over them.

The shift-up animation can change the hover state even if applied to text elements. When the cursor hovers over a text card, like help us or hot sale, it will shift up and attract attention. Hovering over text or any other elements from the group with the shift-up animation will automatically raise them. You do not need to apply hover over the element effect every time. When any visitor hovers over the element from the group, he will see a one-piece interactive structure.