Hover Effects Builder Documentation

Introduction

With Hover Effects Builder you are able to:

  • Apply CSS3 hover effects to the images on your website without any CSS coding knowledge.
  • Assign any of predefined effects to featured images for standard and custom post formats.
  • Create your own hover effects with unlimited variations of styles and colors in our Editor.
  • Combine different effects to create unique animation hover effects.
  • Apply fully customizable shortcode to any image in WordPress Post/Page Editor.

Features List

  • 60 default hover effect templates (fully editable);
  • Fully customizable shortcode;
  • Simple API integration into your WordPress theme;
  • Build-in Editor;
  • Social Share Buttons;
  • Overlay, Hover Buttons styling;
  • Overlay Content styling and typography (title, excerpt, categories);
  • Customizable background and foreground colors;
  • Overlay opacity;
  • Image Animation Effects:
  • 2D/3D Rotation Effect, Flip;
  • Scaling, Zoom in/out;
  • Overlay/Hover Buttons/Overlay Content Animation Effects:
  • 2D/3D Rotation effect, Flip;
  • Scaling, Zoom in/out;
  • Fading/Sliding;
  • Help documentation;
  • Free support.

Installation

Please follow the steps below to install Hover Effect Builder in WordPress:

  1. Download Hover Effect Builder plugin from your My-Account -> Download area of codecanyon.net and unzip it.
  2. Go to your WordPress admin panel.
  3. Press "Plugins" -> "Add New" and click on "Upload Plugin".
  4. You will be redirected to "Upload Plugin".
  5. Click the "Choose File" button.
  6. Browse hover-effects-builder.zip file and click "Install Now" button to upload it.
  7. Click on "Activate the plugin" to finish the installation.

That's it! Now go to Hover Effects Builder -> Templates tab to start using or creating your own templates.

How to Use Templates

Hover Effects Builder offers you a number of predefined templates as examples of animation effects that can be created.

Go to "Templates" tab to see them. Hover over the images to see the effects in action.

Templates

You can rename the templates, reorder them, clone, delete or edit according to your needs. They are fully customizable in our Editor.

Usage Options

In the bottom of the templates, you will see the post formats each template is assigned to. Click on "Assigned to" to modify this setting. You will be redirected to "Usage Options" tab where you can select the Post formats you wish to assign target template to.

Assigned to

Exclude Classes. If you need to disable hover effects on blocks with specific classes, add names of the classes to this field, separating them by commas.

Exclude Classes

How to Create/Edit Templates

To create new template press "New Template" button and you'll be redirected to Editor Tab to create unique hover effects without coding.

New Template

You have an opportunity to enable several effects and combine them creating a diverse animation to be applied to your image.

New Template

Template Name. The default name of new template will be Untitled. You can rename it by clicking it and typing a new name. Click the check mark symbol or press Enter to finish renaming the template.
Save Changes. You'll see "( Not saved yet... )" note next to the template name if it is not saved. After you press "Save changes" button in the right upper corner, your new template will appear in the Templates Tab.
Reset to Default. Creates new unsaved template and resets editor to its default settings.

Editor

You can preview all changes in the left sidebar.

Left Sidebar

Preview State. Set Default mode to test the animation effects. Or set Hover mode to see all changes in preview window during editing the settings.
Preview Size. Select the preview size that corresponds to the featured image you create the hover effect for. In this way you'll have better idea of how your hover effects will look like on images of different size.

General Options

General Options

Image Wrapper Overflow. Hide or show elements that are out of the image wrapper.
Animation Duration. Define how many milliseconds an animation will take to complete one cycle.
Border Radius. Set Default and Hover setting to apply hover effects to rounded images.

Image

Image

Rotation Effect

Transform Effects feature allows you to rotate, scale, move, skew the featured image on mouse hover on it.

Rotation Effect

Enable to rotate image in 2D/3D around X, Y and Z axis on mouse hover. You can configure the Default and Hover state of the image relatively to the x-axis, y-axis and z-axis.
Default. The original position of the image, without hover action.
Hover. The effect applied to the image when hovering over the image.
Perspective. Change the perspective on how 3D elements are viewed.

Scale Effect

Scale Effect

Enable to zoom in/out image on mouse hover.
Default. The original size of the image, without hover action.
Hover. The size of the image you'll see when hovering over the image.

Additional Settings

Additional Settings

Background Color. Allows you to set color and opacity for background seen when Scale or/and Rotation Effects are applied to image.
Image Origin. Sets the starting position of image in default state.

Image Overlay

Image Overlay

Enable this option to add an overlay to your image whenever the mouse is hovering over it.

Overlay Styling

Styling

Overlay Color. Select color of the overlay and adjust its opacity according to the needed color scheme.

Fade and Slide

Fade and Slide

Fade Effect. Enable this option to create fading overlay effect.
Slide Effect. Enable this option to slide in an overlay from a specified direction.
Slide Direction. Select image overlay slide direction.

Transform

Transform

Rotation Effect

Enable to rotate image overlay in 2D/3D around X, Y and Z axis on mouse hover. You can configure the Default and Hover state of the overlay relatively to the x-axis, y-axis and z-axis.

Rotation Effect

Default. The original position of the image overlay, without hover action.
Hover. The effect applied to the overlay you'll see when hovering over the image.
Perspective. Change the perspective on how 3D elements are viewed.

Scale Effect

Enable to zoom in/out image overlay on mouse hover.

Scale Effect

Default. The original size of the overlay, without hover action.
Hover. The size of the overlay when hovering over the image.

Additional Settings

Additional Settings

Overlay Origin. Sets the starting position of the image overlay in hover effect animation.

Buttons Tab

Buttons Tab

Buttons Set. Select which button(s) will be shown in this template.
Link button leads to the post/page to which featured image is assigned to.
View button opens image in prettyPhoto lightbox or in a separate tab according to image URL if prettyPhoto script is disabled.
Use PrettyPhoto. Enable/disable prettyPhoto script for View button.

Styling

Button Styling

Buttons Type. There are three button types: simple, with background color and with border.
Foreground/Background Color. You can choose any foreground/background color for your buttons.
Border Radius. Adjusts the corners of the buttons. Choosing different values for default and hover states can create interesting animation effect.
Buttons Size. Set the buttons size according to your needs.

Fade and Slide

Button Styling

Fade Effect. Enable this option to create fading buttons effect.
Slide Effect. Enable this option for buttons to slide from a specified direction.
Slide Direction. Select buttons slide direction.

Transform

Button Transform

Rotation Effect

Enable to rotate Link/View buttons in 2D/3D around X, Y and Z axis on mouse hover. You can configure the Default and Hover state of the buttons relatively to the x-axis, y-axis and z-axis.

Rotation Effect

Default. The original position of the buttons, without hover action.
Hover. The effect applied to the buttons you'll see when hovering over the image.
Perspective. Change the perspective on how 3D elements are viewed.

Scale Effect

Enable to zoom in/out Link/View buttons on mouse hover.

Scale Effect

Default. The original size of the buttons, without hover action.
Hover. The size of the buttons when hovering over the image.

Additional Settings

Additional Settings

Buttons Origin. Sets the starting position of the buttons in hover effect animation.

Content Tab

Additional Settings

Enable Content to add overlay content and share buttons to your template.

Content Elements. Allows you to select which content element(s) will be shown in this template (Title, Excerpt, Categories, Share Buttons).

Always Show. Enable this option to show the content in default and hover state. This option can come in handy if you create image caption effects.

Styling

Styling

Content Area Type. Select "Cover Full" area type to show full-size content overlay on the image. Or select "Partial" to create partial overlay for which you can choose Content Area Size in pixels and Content Area Position (top, bottom, left, right).
Background Color. Choose content color and adjust it's opacity. Set the opacity to the minimum to make overlay transparent.
Content Area Margin. Creates the spacing from the image wrapper edges.
Content Align. Aligns content elements (title, excerpt, etc.) to the center or left/right edges.

Title Settings.

Title Settings.

Typography. Set title's size, color and styling.
Title Type. Choose type of Title on Content Overlay. May be Link or Heading.

Excerpt Settings.

Excerpt Settings.

Excerpt Length. Allows you to set the number of excerpt lines shown on content overlay.
Typography. Set excerpt's size, color and styling.

Categories Settings.

Categories Settings.

Typography. Set category's size, color and styling.

Share Buttons Settings.

Share Buttons Settings.

Share Buttons Set. Select social share buttons to be displayed on content overlay.
Typography. Set share buttons font size and color.
Border Radius. Border Radius. Use this option to adjust the corners for share buttons.

Fade and Slide

Button Styling

Fade Effect. Enable this option to create fading content effect.
Slide Effect. Enable this option for content to slide from a specified direction.
Slide Direction. Select content slide direction.
Push the Image. If enabled, the content overlay will push away the image according to the slide direction setting.

Transform

Content Transform

Rotation Effect

Enable to rotate content in 2D/3D around X, Y and Z axis on mouse hover. You can configure the Default and Hover state of the buttons relatively to the x-axis, y-axis and z-axis.

Rotation Effect

Default. The original position of the content, without hover action.
Hover. The effect applied to the content you'll see when hovering over the image.
Perspective. Change the perspective on how 3D elements are viewed.

Scale Effect

Enable to zoom in/out content on mouse hover.

Scale Effect

Default. The original size of the content, without hover action.
Hover. The size of the content when hovering over the image.

Additional Settings

Additional Settings

Content Origin. Sets the starting position of the contents in hover effect animation.

How to Use Shortcode

Use shortcode to add hover effects to your images in Post/Page Editor.

Available attributes:
Attribute Default Description
id (required) none Hover effect template ID.
size medium May be thumbnail, medium, large, or other sizes defined by current theme. Alternatively enter image size in pixels: 200x100 (Width x Height).
alignment center May be left, right, center.
link Permalink to current post Custom URL for Title link or Link button.
view Permalink to current image Custom URL on Link button.
title The title of current post Custom title in Content section.
text Empty Custom text in Content section.
share post May be post or image. If you share the image, you can add custom "link", "view" and "title " attributes to your shortcode.
display block May be block or inline.
new_window 0 May be 0 or 1. If new_window='1' title link will be opened in new window.

Image Details Settings

You can add hover effect template to any content image using Post/Page Editor Image Details window.

After inserting image into post/page, select the image and click Edit button. In Image Details window, see Hover Effect Settings that follow Advanced Options.

Hover Effect Template ID. Select a hover effect from the Templates Library for your image.
Title. If the content overlay is enabled in the template you use, you can set a custom title. If this field is empty, the current post title will be used.
Link.Set custom URL for Title Link or Link button. By default, the permalink to current post is used.
Open Link in. May be 0 or 1. If new_window='1' Title Link will be opened in new window.
Text. Set custom text for Excerpt on Content Overlay.
Share. If social share buttons are enabled in the template you use, you can choose whether to share the post or the image itself by adjusting this option. If you choose to share the image, you can add custom "Title", "Link" and "View" attributes to your shortcode.
Display. May be block or inline.

Image Details Window

Theme Integration. API Usage

To integrate Hover Effects Builder plugin into your theme you should use TGM Plugin Activation library. Follow instructions from the official site of TGM Plugin Activation library to install it and configure the config options. To add Hover Effects Builder plugin to config options of TGM Plugin Activation library, add array entry to $plugins variable.

$plugins= array(
  // This is an example of how to include a plugin pre-packaged with a theme.
  array(
    'name'               => 'Hover Effects Builder', // The plugin name.
    'slug'               => 'hover-effects-builder', // The plugin slug (typically the folder name).
    'source'             => get_stylesheet_directory() . '/lib/plugins/hover-effects-builder.zip', // The plugin source.
    'required'           => true, // If false, the plugin is only 'recommended' instead of required.
    'version'            => '1.0', // E.g. 1.0.0. If set, the active plugin must be this version or higher.
    'force_activation'   => false, // If true, plugin is activated upon theme activation and cannot be deactivated until theme switch.
    'force_deactivation' => false, // If true, plugin is deactivated upon theme switch, useful for theme-specific plugins.
    'external_url'       => '', // If set, overrides default API URL and points to an external URL.
  )
);

To use Hover Effects Builder plugin in your own theme you have to follow these steps.

1 - Register new types of images you wish to assign the hover effects to.

add_action('init', 'hi_register', 1);
function hi_register(){
  global $hi_api;
  $hi_api = array(
    array(
      'id' => 'recent_posts',
      'name' => __( 'Recent Posts' ),
      'desc' => __( 'Recent Posts Plugin Thumbnails' )
    ),
    array(
      'id' => 'sample_images',
      'name' => __( 'Sample images' ),
      'desc' => __( 'Another plugin or theme images' )
    )
  );
}

After that "Theme support: API" section will appear on "Usage Options" tab from where you can assign existing templates to your images.

Theme support: API

2 - In your code where you generate the HTML of your image you have to add (or change your) code:

// get image ID if necessary (it can be another method)
$image_id = get_post_thumbnail_id();

// get image html
$image_html = wp_get_attachment_image( $image_id, $size );

// if Hover Effects Builder plugin exists
if( function_exists( 'hi_api_get_wrapper' ) )
{
  // set params to new hover effect
  $params = array(
    'link' => 'http://example.com/', // Used to set custom link on "Link"  button or "Title" link in content section. ( default: Permalink to current post  )
    'view' => 'http://lorempixel.com/800/570/cats/4/', // Used to set custom link on "View" button( default: Permalink to current image )
    'title' => 'My cat', // Used to set custom title in content section.( default: The title of current post )
    'text' => 'My cat loves watching the birds', // Used to set custom text in content section.( default: Empty  )
    'share' => 'image' // May be post or image. What share...( default: post )
  );
  // echo image with hover effect
  echo hi_api_get_wrapper( 'recent_posts', $image_id, $image_html, $params );
}
else
{
  // echo image without hover effect
  echo $image_html;
}

After that assign some hover template on "Usage Options" page, save changes, and everything should work OK. That's all.