Streaming live at 10am (PST)

Change button z-index to front after hover-in animation, but not effect hover-out


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 -


  1. 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.
  2. I set the masked-div with a z-index above the other elements.
  3. 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,

Here is my public share link: LINK
(how to access public share link)