Media Hovers Wordpress Plugin


Thank you for purchase. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form on the link above. Thanks so much!

How to install

Make sure you extract downloaded file from codecanyon, inside you will find file named: ''. This is the plugin file you upload in wordpress panel!

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
1. Using FTP Client, delete old plugin files and upload new ones. Or deactivate plugin, delete plugin files and upload new plugin files and activate. Then clear cache.
2. Your previously created data is going to be saved.

If you use multiple galleries in the same page you can either:

1. Create new gallery for every instance you use:

Wrong: (2 same galleries cannot repeat in the same page!)
[apmpp player_id='1']
[apmpp player_id='1']
[apmpp player_id='1']
[apmpp player_id='2']

2. Use same gallery with different instance_id in shortcode:
[apmpp player_id='1' instance_id="0"]
[apmpp player_id='1' instance_id="1"]
(instance_id is just a unique number you choose for each gallery)

Aside from media playback that can happen on hover or click, 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 open 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:

You can add any HTML inside a hover element and then style it with CSS in custom CSS section:

Create categories in category tab.

Then assign categories to each image in Edit media dialog:

Using category in shortcodes?

Note: when you use category in shortcode (to display only images from specific categories) its not possible to have category buttons, so category buttons are automatically hidden!

Default shortcode looks like this:

[apmpp player_id='PLAYER_ID']

To show only images with certain category in shortcode list one or more categories in category attribute spearated by comma, no spacing.

Show only images from animals or nature category:

[apmpp player_id='PLAYER_ID' category="animals,nature"]

Category is a slug:

Optional attributes for category include match attribute. If you have multiple categories in shortcode, you can match images that include any of the categories or all of the categories listed in shortcode.

match="any" - match images with any of the categories listed (this is default):

[apmpp player_id='PLAYER_ID' category="animals,nature" match="any"] – show images from animals OR nature category

match="all" - match images with all of the categories listed:

[apmpp player_id='PLAYER_ID' category="animals,nature" match="all"] – show images that have BOTH animals AND nature category

Load more with category:

[apmpp player_id='PLAYER_ID' category="animals,nature" use_load_more="1" load_more_limit="5" use_load_more_btn="1" load_more_btn_text="LOAD MORE"]
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 Edit Gallery / Images tab, in Edit media dialog, 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 cover with the following option:

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

Using option to autoplay videos in the grid can be activated in Gallery manager / Autoplay mode:

When Autoplay Videos On Start is true, only videos will be used, meaning you dont need to provide thumbnails with your images.

Exception is if you use Grid type justify, you need to have thumbnails set, because justify grid requires image sizes for calculation.

Its recommended to use thumbnail images with videos (because it may cause problems on mobile browsers if only videos are used).

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.

Load more in shortcode:

[apmpp player_id='PLAYER_ID' use_load_more="1" load_more_limit="5" use_load_more_btn="1" load_more_btn_text="LOAD MORE" use_scroll_to_bottom="1" scroll_bottom_offset="300"]

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.

Pagination in shortcode:

[apmpp player_id='PLAYER_ID' use_pagination="1" pagination_limit="5" pagination_previous_btn_title="Previous" pagination_previous_btn_text="Prev" pagination_next_btn_title="Next" pagination_next_btn_text="Next"]

Support for shortcodes in title and description. Enable here:

Add shortcode in title, description and alt image fields:

Custom css for the gallery can be entered in Custom CSS tab in Edit gallery.

Default HTML structure for the image look like this:

<div class="mpp-playlist-item" title="Image title">
   <div class="mpp-inner">
        <div class="mpp-content">
            <img class="mpp-thumb" src="IMAGE_URL" alt="image">
            <div class="mpp-media">
            	<video class="mpp-video"><source src="VIDEO_URL"></video>
        <div class="mpp-info">
            <div class="mpp-title">Image title</div>
            <div class="mpp-description">This is image description</div>

Example of how to apply some css changes:

round corners (depends on the skin):

    border-radius: 10px;
    overflow: hidden;

Title and description font style:

    font-size: 20px;
    color: #0f0;
    font-style: italic;

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 your PURCHASE CODE, provide a link to your live page, and a temporary user and password for your wordpress admin panel so we can have a look.

How to contact us?

If you have any questions after purchase, send a message at, and provide your PURCHASE CODE.