Media on Hover Widget

The Media on Hover Widget from RTM Elements allows you to reveal images or videos when visitors hover over an element on your Elementor website. It’s a simple way to add interactive, eye-catching effects that make your content more engaging.

With the Media on Hover Widget, you can add your media, control how it appears on hover, and customize its style to match your website’s design.

Step 1 — Make Sure RTMKit & RTMElements Activated

The Media on Hover Widget is part of the RTMElements Addon, which is available with a Rometheme PRO subscription. Before you begin, make sure you have:

1. Installed and activated RTMKit on your WordPress website. (Go to Plugins → Add New Plugin, search for RTMKit, then click Install Now and Activate).
2. Subscribed to Rometheme PRO and connected your account to RTMKit.
   📘 Getting Started with Rometheme PRO
3. Activated the RTMElements Addon from WordPress Dashboard → RTMKit → Features → Addons → Install & Activate RTM Elements.
   📘 How to Activate Addons

Step 2 — Add the Media on Hover Widget

• Open the page with Elementor.
• Find RTM Elements → Media on Hover.
• Or search for Media on Hover in the Elementor widget panel.
• Drag and drop the widget into your desired section or container.

Step 3 — Setting the Media on Hover Widget

• In the Content tab, you will find several sections to set up your card.

Media

• Media: Choose the media type (video or audio) and its source: upload your own file, use an external URL, or a YouTube link. You can also set a start and end time to play only a highlight of the clip.

Poster

• Poster: Sets the image shown before the media plays. Use a custom image, or let it use the first frame of the video automatically.

Card Content

• Card Content: Adds the title, description, button, and link to your card, and sets whether the content appears below or over the media.

Playback

• Playback: Controls how the media plays, such as on hover, on click, or when the card appears on screen. You can also set what happens when the mouse leaves, and whether the media loops or is muted.

Overlay

• Overlay: Shows a play icon, text, or duration badge on top of the media, and sets whether it hides while playing.

Cursor

• Cursor: Replaces the mouse cursor with a custom one, for example a circle with the text PLAY, while hovering the card.

Performance

• Performance: Helps your page load faster by loading media only when needed and pausing it when it’s off screen.

Step 4 — Custom Style the Media on Hover Widget

• Go to the Style tab to customize the card’s appearance to match your website’s design.
• Card: Set the card’s aspect ratio, how the media fits inside it, and its padding, background, border, and corner radius.

• Hover Animation: Adds movement when visitors hover over the card, such as scaling, shifting, rotating, or zooming into the media. You can also adjust blur, brightness, and opacity for extra effect.

• Overlay: Adds a color layer on top of the media, with optional blur, and sets the position of the overlay content.

• Overlay Icon: Customize the play icon’s size, colors, border, and blur, with separate Normal and Hover styles.

• Card Content: Style the content area below or over the media, including its alignment, background, border, and the fonts, colors, and spacing of the title and description.

• Hint, Loader & Progress: Sets the colors of the sound hint, loading indicator, and progress bar shown while the media plays.

Step 5 — Publish the Template

• Once your design is complete, click Publish to save your changes and make your Media on Hover cards live on your website.