How to Use Hover Animation In Web Design

The Hover Effect for an Element is its appearance change when you hover over it. The Hover Animation automatically draws visitors' attention to the Content and improves the engagement and interaction on a website. In the Property Panel, you can change the hover for Color, Border, Radius, Shadow, etc., and set the Duration.
On-Hover Animation

Browse By Feature Categories

Color On Hover

Setting the Element Color On Hover helps focus the visitors' attention on an Element and gives an impression and concept of the desired idea about its meaning. You can change the Element's Color on Hover. For that, select an Element, and in the Property Panel, click the Animation On Hover Tab and the Hover checkbox. Modify the Color to be applied on hover.

Border On Hover

The Element Border is also important to improve the interaction of Elements and to draw visitors' attention. You can change the Hover Border for such Elements as Icon, Image, Shape, Group, Grid, etc. In the Property Panel Hover Tab, check the Hover checkbox. Modify the Border to be shown while hovering an Element.

Radius On Hover

For Images and Shapes, Groups, and Grid Cells, you can change the Radius on Hover. Elements become attractive with this property, prompting action (Buy Now, Read more buttons, etc.) and making your design unique. In the Property Panel's Hover Tab, enable the Hover Mode. Drag the Radius slider to set its value On Hover.

Shadow On Hover

You can modify the Shadow property on Hover for Texts and other Elements. To set the Shadow on Hover, add or select an Element. Next, go to the Property Panel Hover Tab, check the Hover checkbox, modify the Shadow to be applied on Hover. You can start with one of the Shadow Presets and customize it if needed.

Transparency On Hover

You can modify the Element Transparency on Hover to add interaction and attractiveness to website design. In the Property Panel select the Hover tab and check the Hover checkbox. Set the Transparency to be applied on Hover. Click somewhere in the Block to unselect the Element. Hover the Element to test the Transparency Change.

Move On Hover

The Hover Animation Effects used on modern websites have become more and more sophisticated. One of the effect examples is the Element Move on Hover. You can add the move of an Element on Hover. Add or select an Element and go to the Property Panel. Select the Hover Tab and check the Hover checkbox. Set the values for the Move X, Y property.

Rotation On Hover

The Rotation on Hover is the next important and complex effect. To rotate an Element on Hover, add or select an Element and go to the Property Panel. Select the Hover Tab in the Animation On section, then check the Hover checkbox. Use the Slider to set the Rotation Angle or enter the value into the input field. The supported values for the Rotation Angle are from 0 to 359.

Scale On Hover

Scaling can look like the most natural reaction on your cursor. Therefore, it can be very popular. You can easily add the Scale On Hover to your website. For that, add or select an Element and then go to the Property Panel. Select the Animation On Hover Tab and check the Hover checkbox. Scroll down to the Scale, Rotate and Move properties. The actual size is equal to 100.

Hover Duration

You can manage hover animation by setting its Duration. To set Duration for Animation on Hover add or select an Element and go to the Property Panel. Select the Animation On Hover Tab and choose the Hover checkbox. The supported values for the Slider are from 10 to 200, and you can enter a bigger number into this field if needed.

Animation On Hover

The Hover Effect for an Element is its appearance change when you hover over it. You can change the hover behavior for Color, Border, Radius, Shadow, Transparency, Move, Rotate, and Scale. You can also set the Animation Duration.