The Video Hover Component
The Video Hover component allows you to create an interactive element on your website that changes its appearance when a user hovers over it. It can display a different video and text, making your design more engaging and dynamic.
How to Add the Video Hover Component
You can easily add the Video Hover component to your canvas using the Add Menu:
Open the Add Menu: Press the letter M on your keyboard or click the Add Menu icon.
Search: Search for "Video Hover" in the menu.
Place on Canvas: Drag the component onto your canvas.
Uploading a Video
Once the component is on your canvas, you can add a video using a URL or by uploading a file from your computer.
From Vev’s built-in royalty-free video libraries (Pexels, Pixabay, Unsplash)
From a URL:
Double-click the Video Hover element on the canvas.
Click the pen icon under "Video background".
Choose "From URL".
Name your video, click "+ Add Item", and paste your video link.
Select the video type and click "Save".
From Your Computer:
Double-click the Video Hover element.
Click the pen icon.
In the gallery, click "Upload" and choose your video file from your computer.
Styling and Configuration
The Video Hover component has several styling and configuration settings that you can access by double-clicking the element on the canvas.
Background Overlays:
Default Overlay: A background color or effect that is visible when the component is not being hovered over.
Hovered Overlay: A different background color or effect that appears when the user's mouse is over the component.
Text:
You can style both the default text and the hover text separately to create a clear visual change.
You can also adjust the padding, borders, border radius, and add effects like shadows or blur to the text container.
Effects: You can add different types of shadows or blur effects to both the video and the text elements to enhance your design.
Configuration Settings
Default Text: The text that is visible when the component is not being hovered.
Hover Text: The text that appears when the user hovers over the component.
Video Background: The video that plays when the component is not being hovered.
Hover Video: The video that plays when the user's mouse is over the component.