Home App Docs Blog Github

Creating an on hover overlay animation

This guide will go over how to create an on hover overlay animation. In this example we will be adding this to an image, but this animation can be applied to any blocks:

  1. Drag and drop a box onto the image and set it to 100% width and height.

  2. Give the box a background color and adjust the “a” value to make it partially transparent.

  1. In the styles tab, navigate to the opacity section and give the box an opacity of “0”

  1. With the box still selected, navigate to the animate tab and choose “hover” as the trigger and click “edit” next to “hover state”.

  1. Navigate to the opacity section and give the box an opacity of “1”, and then click “done”. Now, your hover animation should look something like this: