Now that I have been able to get my hover animation to hover-in, hover-out the way that I want (Thanks @dram). I am now looking to figure out how to get a button that is within the animation to be clickable while the hover-in state is active without affecting the hover-out state.
Here is my site page - https://housescorz.webflow.io/home2
- I have a masked-div that is part of the same grid that moves the “header, paragraph, and button” UP, on the hover-in action.
- I set the masked-div with a z-index above the other elements.
- I have scaled and increase the size of the masked-div to be the same size as the opacity background, at the end of the animation, so that the hover-out area is larger to ensure it does not close.
To make the button clickable I need to make the z-index of the button be brought forward, but when I do that, it triggers the hover-out animation. Is there a way to have an active button state work that does not affect the “masked-div” hover-out state?
Thanks in advance,