Text animation on top of hero background video

Design help General
1

Hello,

I am looking for some design advice on how to incorporate the text over my background video.

Right now I have the text at the bottom so that when you roll over the one line - it opens up enough to display all the text but still have the fins clearly above it in the water.

Problem is that folks won’t know to rollover. I am considering just leaving it expanded, trying some kind of scroll down (i tried this where another element further down had to be viewed for it to open but it didnt work right). or some other solution.

Anyway have a good idea how to bring this together or recommendations?

preview is here: https://webflow.com/design/new-onwarddental2-e431c148618958c98f981

Thanks,
Jared

2

Hey @jared8 you may be able to just add an arrow icon that sites at the top of that section (absolute positioning, top) that would be a visual indicator to hover on that item (here’s a quick mock-up of that).

That way you have a friendly UX on desktop & mobile :smiley:

1553×807 212 KB

3

Thanks @Waldo! , I will try that. Where can I find that arrow icon? someplace like istockphoto?

I actually turned the video off for the phone since i was worried it wouldn’t load properly there (this is on tablet and desktop only at the moment).

Cheers,
Jared

4

@jared8 Some good icons (including arrow icons) can be found at entypo.com for free. Hope this helps! :wink:

5

awesome.

think it’s much better now - https://preview.webflow.com/preview/new-onwarddental2-e431c148618958c98f981?preview=c6c57d62372e70fe801404f1e1f7f581

thanks

6

Hey @jared8 & @VLADinSACRAMENTO another great icon store/resource is The Noun Project: https://thenounproject.com/

Nice job!!! :smiley:

7

Thanks @Waldo for the great resource. :wink: