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:

Hey @maddy

I’m trying to take this example one step further.

I would like have a “title” on the image that fades out when the hover overlay fades on.
See the attachment. The first image is the the one that displays with the “title” and the second is the overlay display.

image

Hi Harrison,

It should be the same steps to get the hover animation showing, just in reverse. So you’re going to start off with the opacity at 1, and then when you click Edit, instead of setting the opacity to 1, you’ll set it to 0.

In addition to this, on the image element, use event bindings to attach the mouse enter and mouse leave events, and then on the “text box” use a data element binding to say “hide if state.showbox is true”. I just used the name “showbox”, but you can use whatever name you’d like. As you can see, when I hover over the image, the text box disappears.

With these two steps, you should be able to work, but please reach out if you have any further questions. We’re here to help! :slight_smile:

1 Like

@nicke920

Thank you that was a big help to get me to working prototype, but it is not holding up in practice.

Everything works great until about 0:45 in the video. What could be going on here?

Hey Harrison,

Glad we could get it up and running! It looks like at some point, the events of mouse leave and mouse enter switched, as if somehow you are leaving twice or enter twice at one point (which reverses the toggle), and thus it appears opposite after that point.

In slow motion, as a good debugging method, you can try to pinpoint exactly what steps you took to create the above issue and that way, you can follow how “state” reacts to the mouse movements.

You can also try, possibly instead of using “toggle”, you can set the state so that whenever mouse leaves an element, do X, and whenever mouse enters element, do Y

1 Like