Using Video on Hover is a powerful way to make your Elementor website more interactive and visually appealing. With this effect, you can instantly play a video when users hover over an image or section, creating a dynamic experience that grabs attention. Whether you’re showcasing products, portfolios, or background visuals, video on hover can transform static designs into engaging, motion-driven elements that keep visitors interested.
Popular Use Cases for adding Video on Hover effect on an Elementor Website
Product Showcases
Instead of showing just static product images, you can play a short product demo or 360° rotation video when users hover over the thumbnail. This helps visitors understand the product better and increases engagement.
Portfolio Galleries
Designers, photographers, or videographers can display preview videos of their projects on hover. For example, a hover on a still frame could instantly play a short animation or clip from the project.
Service Highlights
Businesses can use video on hover to explain services quickly. Hovering over a service card could show a short clip that illustrates the process or value of the service.
Background Effects
Sections of a website can come to life with video on hover — for example, turning a static hero background image into a video when hovered, creating a more immersive experience.
Real Estate Listings
For property websites, hovering over a property image could play a short walk-through video, giving users a quick sense of the space without clicking through.
Travel & Hospitality Websites
Hotels, resorts, or destinations can showcase short clips of experiences, rooms, or scenic views on hover, making the site more inviting and aspirational.
Entertainment & Media
Streaming platforms, movie sites, or gaming websites can use video on hover for trailers or previews, so users get a quick idea of the content before clicking.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Video on Hover widget to your Elementor website
To play a video on hover, install the Video on Hover widget from the Unlimited Elements Widget library.
Step #3: Add the Video on Hover widget to your Elementor page
Now, in the Elementor editor, find the Video on Hover widget and drag it to the desired part of your page.
General Settings
Image
Select the image you want to display.
Image Size
Choose the image size according to your layout.
Video Source
Select the video source.
- Self Hosted
- Vimeo (Pro)
Video URL
Enter the video URL (MP4, WEBM, or OGV format).
Transition Duration (ms)
Set the hover transition duration in milliseconds.
Layout Settings
Show Overlay (Pro)
Enable or disable the overlay effect.
Show Overlay On
Choose the devices where the overlay should appear:
- All Devices
- Touch Devices Only
- Desktop Devices Only
Show Overlay Icon
Show or hide the overlay icon.
Overlay Icon
Select your preferred overlay icon.
Show Icon Ripple Effect
Enable or disable the ripple effect for the icon.
Show Button (Pro)
Show or hide the button.
Button Label
Enter the text for the button label.
Button Link
Add the URL for the button link.
Show Button Icon
Show or hide the button icon.
Button Icon
Choose the appropriate button icon.
Testing and Tools
Enable this option to display the hidden content. This makes it easier to style and customize without needing to hover repeatedly during the design process.
Wrapping it Up!
By adding a Video on Hover effect in Elementor, you can bring life and interactivity to your website without overwhelming your layout. It’s a simple yet impactful feature that encourages visitors to explore and engage with your content. Start experimenting with video on hover today and see how it can enhance the overall look and feel of your site.