Changing background video while hovering over text

Design help Animations & Interactions
1

Dear Webflow-Team,

I’m switching from Cargo to Webflow and am loving the accuracy and the sheer endless amount of animation possibilites so far!

Half way through finishing my new website, I wanted to create the following –

  1. When hovering over three different text blocks I want to change the background video to match the content of these text blocks (similiar to this page - https://agenceapicorp.com/ ).

  2. Only at the starting page, I figured that my navigation bar is not working properly. I can’t click the text blocks though they’re all linked.
    I guess the problem has to be that the background video is on top/something with the preloader?

  3. Is there the possibility to create two navigation bars which are exactly the same except for one, the background is transparent? I tried cmd-c - cmd-v but whenever I change something within the navbar, it changes for all my subpages, too.

I’m very much looking forward to your answers!

Kind regards

2

Hi

it’s not super clear but

  • Create a section and choose relative position
  • Inside : All the bacground video are in absolute position with Z index 1 They mus ahev a width and a height. They have the same class.
    All text that will trigger the show hide are in relative position Z index 2. So theay are above videos
  • Create interaction on each text element. The first one hide all the backgoung video with the same class and show the selected video.

Thats it.

6

@Romuald_Jay Is there a way to make this CMS compatible? I have a sample of this but it disappears once the mouse leaves the trigger. I want to have it stay on the highlighted video until you hover on a different one (essentially swapping the active CMS embed background video).
If you click to the fourth slide, the slide I’m referring to will show.

https://preview.webflow.com/preview/crumbs-studio?utm_medium=preview_link&utm_source=designer&utm_content=crumbs-studio&preview=b2880f52dfd43939349854bb33d69aaa&pageId=64cc537fd4d4629cd9a12b9e&workflow=preview