How can I add a background video behind a card section and let it play while hovering over the card?

Design help Animations & Interactions
1

Hello,

I’m stuck on a problem concerning a card section I’ve created. When the user hovers over the cards the image should fade out and the background video should start to play. The text and the button should stay and lay above the image and video.

Here is the live site: https://connery.webflow.io/ (here I used custom js to add a hover effect over the background image)

Here is the preview: https://preview.webflow.com/preview/connery?utm_medium=preview_link&utm_source=designer&utm_content=connery&preview=33418a6a9fa24e45466ffd40e979ee1c&mode=preview

This is an example of how it should look like (the card section with background video): https://www.agentur-loop.com/

And here is a principle video of how it really should look like: https://share.florianmatthias.com/12u1pG1b

Can you help me here? Or do you a way how to achieve this?

Thank you in advance and a beautiful day.

2

Hi @Sebastian_Wieser,

This could be achieved partially with a background video element, hidden behind the image. When the user hover over the image it can fade out and reveal the background video. I said partially since bg videos element run in a loop and you do not control the start and stop of the video.
If you want to mimic the agentur-loop website 1:1 you’ll have to use some JavaScript to control the play and stop of the videos with mouse hover.