INTRODUCTION

Image Hover Effects is an amazing plugin that will allow the user to add 40+ hover effects to images with captions. Hover effect is simply a change (of color, size, shape, image, etc.) of some element while you put a mouse arrow over it.

PLUGIN INSTALLATION

How to install WP Image Hover effect pro plugin in WordPress -Step by Step:

PLUGIN SETTING

Image Hover Effect Display Settings

  • Display On Page Load : Tick to display image hover effect on page load automatically without waiting for an event.
  • Display Effect Always : Tick to do not display Image Hover Exit Effect When User Takes Away Mouse Focus From Image.

Image Hover Effect Settings For WooCommerce Products

You can set background image as well as color and gives you all options by which you can set images with effect gallery as you want.

  • Apply On : Tick on Shop Page
  • Current Hover Effect : Select from the below for which effect you want to apply this product

Image Hover Effect Settings For ‘Docs’ Post Type

You can set background image as well as color and gives you all options by which you can set images with effect gallery as you want.

  • Apply On : Tick on Post Listing ,Page Single and Post Archive Page
  • Current Hover Effect : Select from the below for which effect you want to apply this post type

Image Hover Effect Settings For ‘Store_locator’ Post Type

You can set a background image as well as color and gives you all options by which you can set images with effect gallery as you want.

  • Apply On : Tick on Post Listing ,Page Single and Post Archive Page
  • Current Hover Effect : Select from the below for which effect you want to apply this effect

Image Hover Effect Settings For ‘Post’ Post Type

You can set a background image as well as color and gives you all the options by which you can set images with effect gallery as you want.

  • Apply On : Tick on Post Listing ,Page Single and Post Archive Page
  • Current Hover Effect : Select from the below for which effect you want to apply this post type

Image Hover Effect Settings For ‘Page’ Post Type

You can set a background image as well as color and gives you all the options by which you can set images with effect gallery as you want.

  • Apply On : Tick on Post Listing ,Page Single and Post Archive Page
  • Current Hover Effect : Select from the below for which effect you want to apply this post type
  • Click on save setting

Displaying Hover Effect On Featured Images Of Post/Page/CPT

Hover effects on the featured images of post/page/woo-commerce products can be applied by two types. You can set hover effects on featured images according to their post types and you can have also applied hover effect according to their category. If category wise hover effect is setup from the backend, it will take precedence and will be displayed on the post’s featured image instead of the hover effect set up from the plugin’s Settings page. Post-type-wise hover effect can be applied from plugin’s settings page and category wise hover effect can be applied on WordPress’s default category edit page in backend. Hover effects will be displayed automatically on the frontend.

Displaying Hover Effect On Custom Image

You need to use a shortcode for hover effect only when the hover effect needs to be displayed on a custom image with custom content.

Given below is the minimum parameters form that the shortcode can take to show hover effect on the featured image of any post, page, CPT or woo-commerce product. The only parameter we need to give is a valid id of post/page/product. The shortcode will display the featured image of that post with its current effect that was set for its post type from the settings page.

Minimal shortcode form for showing featured image of any post/page/CPT/woo-commerce product or on any custom image with hover effects :

[hovereffect post_id="{a valid post/page/custom post type/woocommerce product/custom image id}"]

The above shortcode will automatically apply the hover effect on the image according to the settings saved from the setting page.

Hover Effects Types This Plugins Provides

There are two types of effect types you can apply on post/pages/woo-commerce products or on any custom image. Effect type is only a type and it has many associated “effects” that can be applied with it.

Default ImageHover Effect:

This is the type of effect in which a custom overlay comes over the image. This overlay is fully customizable with almost every property like overlay color, animation speed, width, height, overlay content location, opacity, etc. This effect has an “in” effect and an “out” effect. In effect works when we hover the mouse over the image and out effect works when the cursor is taken away from the image. Below is an example of how to use this effect.

[hovereffect hovereffecttype = 'default_imagehover_effects' in='rollIn' out='rollOut' speed='2' color='#8fc91c' text_color="#000000" opacity='0.37' text_position="overlay_center" src="{image_path}" default_effect_type="single"]Description Goes Here[/hovereffect]

For Gradient Color Overlay Effect :

[hovereffect hovereffecttype = 'default_imagehover_effects' in='rollIn' out='rollOut' speed='1' text_color="#000000" gradient_color_one='#212F3D' gradient_color_two='#F4D03F' gradient_color_direction='to top' default_effect_type="multi" opacity='0.98' text_position="overlay_center" src="{image_path}" ]Heading Goes HereDescription Goes Here[/hovereffect]

Scalable Imagehover Effects:

These are the fancy image hover effects that apply very nice image hover effects to an image when the mouse cursor hovers on the image. For showing an image with this effect we just need to pass the minimum shortcode parameters. Below is an example of how to use this effect.

[hovereffect hovereffecttype = 'scalable_imagehover_effects' effect = 'effect_marley' src="{image_path}"]Heading Goes HereDescription Goes Here[/hovereffect]