All Collections
Vev Components
Elements
Adding a Video Hover element
Adding a Video Hover element
Switch to a different video background and text caption when the user hovers over the element
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

👍🏽 Adding a video hover element

  • From the top menu bar, click on the Add Menu (Shortcut: M)

  • Search for and select 'Video Hover'

  • Click and drag the element onto your canvas

Uploading a video to Vev

From a URL

  • Double-click the Video Hover element

  • Click the pen icon under Video background

  • Select From URL

  • Give your video a name

  • Under Video Source select + Add Item

    • Enter your video URL

    • Select the video type

  • Hit save

  • Once the video has been uploaded, hover over the video then select

From Your PC

  • Double-click the Video Hover element

  • Click the pen icon under Video background

  • Select Upload Video

  • Choose the file from your PC

🎨 Styling a video hover element

  • Background:

    • Default Overlay: Set an overlay for the default video

    • Hovered Overlay: Set an overlay for the video appearing on hover

  • Text:

    • Default Overlay: Style the text appearing on the default video

    • Hovered Overlay: Style the text for the video appearing on hover

  • Padding: Add padding to the Text, Hovered Text, and Text Body evenly on all sides, or mix them

  • Border: Set a border color, opacity, and line weight

  • Border Radius: Curve the radius of the border

  • Effects: Add different types of shadows or blur effects. Learn more about effects

⚙️Configuration options

Double-clicking on the Video Hover element on your canvas opens the configuration options.

Parameter

Options

Default Text

This text body is visible in the component's default state - when the component is not hovered.

Hover text

This text body is visible when hovering over the component.

Video background

This video plays in the background in the component's default state - when the component is not hovered.

Hover video background

This video plays in the background when hovering over the component.

Did this answer your question?