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:
Drag and drop a box onto the image and set it to 100% width and height.
Give the box a background color and adjust the “a” value to make it partially transparent.
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.
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.
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
