So I’m prototyping some new features for a video player. Not actually using a video, just mocking up the frame and some of the new interactions. Specifically I’ve got an image as the ‘video’ (just a static background) as a user hovers over the image I would like two toolbars to appear - one at the top, one at the bottom - with clickable controls and the correct directional animation on enter and exit (think YouTube’s on hover bars that appear).
To date I’ve been able to get the slide-in/out working when someone hovers over the background image, but then when the cursor is placed over one of the bars it therefore ‘leaves’ the image area and the bars try to hide.
What I’m trying to create:
- User hovers over image (bars are over the image)
- Top bar slides down
- Btm bar slides up
- Bars stay visible (with clickable buttons in them) until a user moves the cursor completely off the image area
Current results: https://rgthgx.axshare.com/#g=1&p=home&c=1