Media Hovers Elementor Widget

Thank you for purchase of this plugin. If you have any questions that are beyond the scope of this help file, please feel free to send a detailed message on the following link.

How to install?

Make sure you extract downloaded plugin file from Envato, inside you will find file named: ''. This is the plugin file you upload in WordPress panel when you want to install the plugin!

1. In WordPress panel go to Plugins menu
2. Under Plugins menu click "Add New"
3. Select "Upload", choose the archive that you downloaded and click "Install Now"
4. After the plugin is installed click "Activate Plugin"

Activate plugin

After you install plugin you will have to activate your license to start using the plugin.

To activate license you need to create account on the following link, where you will provide your PURCHASE CODE, and get TOKEN in return which you will then enter in plugin section to activate the plugin.

Instructions how to register

Access control panel here

This is made to make sure customers use the license on a single project (as per Envato rules) and to help customers owning many licenses to easily track on which server licenses are being used.

How to update when new plugin version has been released?
Using FTP client, delete old plugin files and upload new ones. Clear browser cache.

First upload some images in Media tab. Then you can assing video url which will play on hover (when mouse is over the image).

Video source

To add HTML5 video, choose hover action video and upload video from Wordpress media library (or paste direct link into the field if your video comes from different source link Amazon, Dropbox etc...). Mp4 is recommened video format and plays on all browsers, desktop and mobile.

You can specify additional video quality which will be used on mobile. This enables to have higher quality video for desktop browsers and lower quality for mobile.

You can add any video url that is public and plays when opened directly in the browser (for example Dropbox, Amazon etc). If your video comes from such source, just paste video url inside the field instead of using upload button.

Player support Youtube single videos. Enter only video ID part when adding Youtube video!

Example video:

Gallery supports Vimeo single videos. Enter only video ID part when adding Vimeo video!

Example video:


If you want to hide video controls for Vimeo videos, this is only possible for Vimeo videos hosted by a Plus account or higher! Other option to hide controls with Vimeo videos, if you are Vimeo Pro member, you can get direct link to video on their servers, than you can use this url as hover type video.

Adding audio to gallery

Upload audio url (mp3, wav, aac, flac...) Mp3 is recommended cross-browser format.

You can test audio format support here for browsers:

Note that for audio to play on hover, this requires some kind of user intraction with the page beforehand (like a mouse click or keypress). If the user hasnt interacted with the page after page load, browser will most likely prevent audio autoplay resulting in no audio when hovering images in the gallery.

Adding images to gallery

Gallery can show another image when hovering original thumbnail (as alternative to video). Choose hover action image and add image url.

Tiles is a default type grid in which images are sorted left to right. Best to use with images that are equal dimensions.

Masonry is mixed type grid, can be used with images of different dimensions.

Apply masonry to grid with following settings:

Justify is mixed type grid in which images have equal height per row, can be used with images of different dimensions.

Apply justify layout to the grid with following settings:

Choose image skin in Skin tab:

Note that some skins might not work well if image mode background cover is chosen instead of default image mode.

Aside from video playback that can happen when you hover or click the image, each image can have link or ligthbox attached. By default video will start playing when mouse enters image area. And if you add link or lightbox url to the image, icon will be created which opens url or lightbox on click. You can choose in settings which element will trigger each action.

Note that you cannot have playback, lightbox and link attached to the same element!

1 - apply to whole item
2 - apply to thumbnail
3 - apply to title and description
4 - apply to icon which will be created

Note: if you use "apply to thumbnail" and you have link or lightbox defined and you are using Youtube or Vimeo videos, you should use this option as well:

Control icons are 3 icons that are shown somewhere above the image (depending on the skin used). These icons are lightbox icon (if lightbox source is set on image), link icon (if url link is set on image), share icon (if social sharing is used).

You can adjust position of these icons in Skin tab:

Add icon over thumbnail to display its content, for example to show that hover element is video / audio / image / Youtube / Vimeo etc... Icon will then hide on hover. Upload icons in the size your want them to be shown.

Activate hover icons in Hover icons tab:

Note that hover action on image needs to be set for hover icons to become visible:

Create category buttons which can filter images.

Manage categories in category tab.

Then assign categories to each image in Media tab (when adding images):

Show subtitles above video area

Subtitles are available for self hosted video, Youtube, Vimeo and audio. Supported formats for subtitles are vtt or srt.

Add subtitle to item in Media tab, under Hover action, add or upload subtitle url:

Subtitle can be styled with CSS. Subtitle format is:

<div class="mpp-subtitle-holder"><div class="mpp-subtitle-holder-inner">Lorem ipsum dolor</div></div>

You can find example of subtitle files in plugin package / documentation folder / data / subtitle directory.

When you create a grid of images, the aim is to have images the same size (same resolution) as videos that will be shown on hover.

By default, thumbnails are created is an img tag. Alternative method is to use CSS background-image with Image mode option in General tab:

Using this method might help if your images and not the same size as videos.

Note that Image mode background image might not work well with some skins.

Its recommended to use thumbnail images with videos (because it may cause problems on mobile browsers if only videos are used). However, its still possible to use just videos (applies only for Playback type video). If you want to use just videos, add only videos in Hover action tab, without setting image thumbnails:

If you have lots of images in the gallery, use load more option to save bandwidth and improve load speed. This will create load more button below the gallery.

If you have lots of images in the gallery, use pagination to save bandwidth and improve load speed. This will create pagination buttons below the gallery.

Videos can automatically autoplay on page load with following option:

Note that this only applies for HTML5 videos (not Youtube or Vimeo etc...)

Test player in real page, not in Elementor editor

Make sure you test player in the real page on the frontend, not in Elementor editor, because some features might not work correctly in editor!

Volume on mobile

Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript

Javascript conflicts

If you have issues with javascript / jQuery conflict in you page, try using the following options in General tab:

Plugin does not work as expected

If the plugin does not work as expected, try the following tests to see if it makes a difference and what could be causing an issue:

1. Update to latest plugin files available on Codecanyon

2. Switch to default Wordpress theme

3. Check for errors in browser developer console (Chrome F12 key, Console tab)

4. Try to deactivate any 3rd party plugins (the ones that not come with Wordpress)

5. If you still have issues after you have done all changes above, you can send a message at , provide a link to your live page, and a temporary user and password for your WordPress admin panel so we can have a look.