Mouse hover hide/show background video

Can anyone help me with creating a hide/show interaction on a background video with a mouse hover? I can’t figure out what I’m doing wrong!

Thanks :slight_smile:


Here is my public share link: https://preview.webflow.com/preview/dissertation-491239?utm_medium=preview_link&utm_source=designer&utm_content=dissertation-491239&preview=efa15dce3da76f55cb0c1d3c3e6ddbef&workflow=preview
([how to access public share link][2])

Hi @Meg1

I think you would find it easier if you were naming your classes and reusing them.

I would start by having the same class for each div within your grid. You can then use a combo class if you want to style them differently. I would apply the interaction to the div class so you only need to have one interaction to make all of your videos work. Likewise, your videos will also have to have the same class and the interaction should be targeting only children with this class.

You may want to also consider adding opacity into the interaction to make it look smoother.

Hi Max,

Thanks for your time and help! I followed your suggestion and applied the interaction to the div class instead of the background video, however this wasn’t working as setting the initial state of the div box to hidden messed up the whole grid… aside from renaming the classes as well I still can’t get the interaction to work.

It’s strange because if I apply a ‘fade’ effect to the background video that works fine, it’s just the hide/show which isn’t working for me!

Hi @Meg1

The interaction on the div needs to target the video. You’ll also want all the videos to share the same class.
I’d still use show/hide in addition to opacity as you will end up having a lot of video being processed by the browser at the same time which could slow down performance on older computers.