“Hover Effects Pack” WordPress plugin Documentation by Horoshilow Boris v2.4


“Hover Effects Pack”

Created: 23/01/2014
By: Horishilow Boris
Email: borisolhor@gmail.com

Thank you for purchasing my item. 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 here. Thanks so much!


Table of Contents

  1. Plugin installation
  2. Set plugin options
  3. Using image shortcode
  4. SiteOrigin Pagebuilder Integration
  5. WPBakery VisualComposer Integration

A) Plugin installation - top

To install this plugin you need go to Plugins -> Add New.



Then click upload and select plugin file.



After that you need to activate plugin.


B) Set plugin options - top

To set plugin options you need go to Settings -> Hover Image Settings.



You can set Hover Images links behavior on touch devices. By default on first touch image effect will appear, on second touch you will follow the link. But clicking this checkbox you can disable this behavior, so you will folloe the link after first touch.



On this page you can set color of the hover layer, title and text.



And also you can set default lightbox for all images, that was inserted via Hover Pack shortcode. You can choose ThickBox or PrettyPhoto.

You can set what part of your image wrap in link tag. So you can wrap whole image (by default), or you can wrap only title or text. Also you can disable it. In this case Image Link field will be unused.

Note! Image lightboxes works properly only with "Wrap whole image" option

There you can set image size, that will be added as preview image by default. If image with this size isn't exist - image with smaller size will be inserted.

Also you can set typography settings for title and text. You can set HTML tag, that will be used for each of them. And for each of them you can set padding from left and right image borders.

You can set this checkbox to add inline css width and height style properties to all images, added via Hover Pack.

Also you can use hover effects on featured images. To do this - you need to set "Enable on Feature Images" checkbox and set all necessary hover settings - effect, opacity, title, effect delay, title slide direction, title rotation, scale and fade effect for the title. You can set "Disable Title Animation" checkbox to disable animation on title. In this case title will be always visible. Also you can set custom image title. Title will be wrapped in same tag, that you set in typography settings.


C) Using image shortcode - top

After plugin was activated you got new button in your WYSIWYG editor.


You may click on this button to open popup window with settings, that allow you to add image.

At first you must select image, that you want to use.


After you select image – it will be added to image field in medium size and link to the full image will be added to image link field. You also can change it.

For each image you can set Title and Alt properties.


There you can set checkbox, that allow you to open your image link in new tab. This will work only if you not use image popup in Hover Pack Options. If you want to use popup for images, but you also need to open links to the other sites - you need to set checkbox "Disable Popup for this link".


You can set Gallery ID attribute to image. Images with same ID will be grouped in one gallery and you will be able to navigate between them by clicking prev/next buttons in lightbox popup.


You can also set width and height for image. After you select image this fields will be automatically filled.


In next field you can add custom CSS class to link tag. It may be useful, if you want to use lightbox or something else.


In next field you can set border radius (between 1 and 50). Also you can type "round" in this field to get round image (border radius 50%). Note: you must use square image to get circle shape (for example 150x150). Rounded images works with all effects, except twist, flip and box.


In next field you can select animation effect for image hover overlay. By default is set to none. This means that only text animation will work - without any hover layer.


You can set Inverse Behavior checkbox to enable inverse effect behavior (effect will be visible by default and will disappear on mouse hover).


Also you can set color for this Hover Effect. This value will override global color value, that was set on Hover Effects Pack Settings.


In next field you can add opacity to hover layer. Opacity options go with step 10 percents. This will work with all effects except flip and flow.


In next field you can add title (optional) , and animation effects for it. You can use mix of several effects, for example slide from left and rotation and opacity. And you can add delay, before animation will start. You also can set "Disable Title Animation" checkbox to disable animation on title. In this case title will be always visible.


In this way you also can add text, that will go after title. All animation effects for text works in same way. Effects for title and for text works independently.



D) SiteOrigin Pagebuilder Integration - top

You also can add images with Hover Effects via SiteOrigin Pagebuilder. Open add widget dialog and select Hover Effects Pack there.


At first you must select image, that you want to use.

After you select image – it will be added to image field in medium size and link to the full image will be added to image link field. You also can change it. Also you can set image Title and Alt attributes for image.

You can set checkboxes, that allow you to open your image link in new tab or disable image lightbox popup for this image.


You can set Gallery ID attribute to image. Images with same ID will be grouped in one gallery and you will be able to navigate between them by clicking prev/next buttons in lightbox popup.


You can also set width and height for image. After you select image this fields will be automatically filled.


In next field you can add custom CSS class to link tag. It may be useful, if you want to use lightbox or something else.


In next field you can set border radius (between 1 and 100). It will work with all effects, except diagonal.


In next field you can select animation effect for image hover overlay. By default is set to none. This means that only text animation will work - without any hover layer.


You can set Inverse Behavior checkbox to enable inverse effect behavior (effect will be visible by default and will disappear on mouse hover).


Also you can set color for this Hover Effect. This value will override global color value, that was set on Hover Effects Pack Settings.


In next field you can add opacity to hover layer. Opacity options go with step 10 percents. This will work with all effects except flip and flow.


In next field you can add title (optional) , and animation effects for it. You can use mix of several effects, for example slide from left and rotation and opacity. And you can add delay, before animation will start. You also can set "Disable Title Animation" checkbox to disable animation on title. In this case title will be always visible.


In this way you also can add text, that will go after title. All animation effects for text works in same way. Effects for title and for text works independently.



E) WPBakery VisualComposer Integration - top

You also can add images with Hover Effects via WPBakery Visual Composer. Open add widget dialog and select Hover Effects Pack there.


At first you must select image, that you want to use.


By default added image is linked to the full size image. You can overwrite this by inserting link in this field.


In this fields you can set Image Alt and Title attributes for image.


There you can set checkbox, that allow you to disable popup window for this link.


There you can set checkbox, that allow you to open your image link in new tab. This will work only if you not use image popup in Hover Pack Options.


You can set Gallery ID attribute to image. Images with same ID will be grouped in one gallery and you will be able to navigate between them by clicking prev/next buttons in lightbox popup.


In next field you can add custom CSS class to link tag. It may be useful, if you want to use lightbox or something else.


In next field you can set border radius (between 1 and 100). It will work with all effects, except diagonal.


In next field you can select animation effect for image hover overlay. By default is set to none. This means that only text animation will work - without any hover layer.


Also you can set color for this Hover Effect. This value will override global color value, that was set on Hover Effects Pack Settings.


In next field you can add opacity to hover layer. Opacity options go with step 10 percents. This will work with all effects except flip and flow.


In next field you can add title (optional) , and animation effects for it. You can use mix of several effects, for example slide from left and rotation and opacity. And you can add delay, before animation will start. You also can set "Disable Title Animation" checkbox to disable animation on title. In this case title will be always visible.


In this way you also can add text, that will go after title. All animation effects for text works in same way. Effects for title and for text works independently.