Reveal interactive element on hover

Design help Animations & Interactions
1

Hey Everyone -

What I’m trying to do seems simple but for some reason I can’t figure it out. I want to be able to interact with an element beneath a text overlay element that appears/disappears on hover.

In my case, there are two areas I’m trying to implement this:

  1. display header text over a video slider that disappears when you hover over it so you can watch the video.
  2. have link text appear over an image while hovered, while also having a blur filter trigger on that image

In both cases, the lower element does not trigger/interact because it’s being covered by the header element.

I’ve tried setting display:none on hover for the overlays, but this just causes the whole group to strobe between states. Setting the element to slide out of the way does the same thing.

Any ideas?

Thanks in advance for any input.

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