Short-code is only needed when you needs to show hover effect on custom image or when you want to show hover effect on featured image of some other post whose post/page/product id is known to you. Most of the time short-code will be used in default content editor of WordPress in back-end along with other content.

Short-Code can be used for two purposes :-

A. Apply hover effect on another post/page/custom post type post featured image.
B. Apply hover effect on custom image

Apply Hover Effect On Another Post/Page Featured Image

Step 1 Copy the id of desired post from URL from its edit post screen in back-end.

shortcodewithpostid
Step 2 Now copy this form of short-code:-
[hovereffect post_id="{a valid post/page/custom post type/woocommerce product id}"]]
Update the post_id parameter with the post id we copied.

shortcodewithpostidbacked
Step 3 Update the page and view the page.

Preview Of Another Post Featured Image With Default Hover Effectchristmascelebration

Note:- Image Hover Effect applied to this post is according to its post type. It take settings from back-end where we have defined individual settings for each post type. This is the minimal form of short-code.

Apply hover effect on custom image

Step 1 First admin needs to go post edit page.
Step 2 Now copy this short-code:-
[[hovereffect hovereffecttype = 'default_imagehover_effects' in='rollIn' out='rollOut' speed='2' color='#8fc91c' opacity='0.37' text_position="overlay_center" src="{image_path}" ]You can place overlay content from here…[/hovereffect] and paste in post.You can copy this short-code from How To Use back-end page of Image Hover Effect plugin in Default Image Hover Effect section.Here four different types of effects are given admin can copy according to his requirement.
Lets use custom overlay effect with custom image.
cutomimagebackend

Note:-First admin needs to give a proper image path in (src=””).Even admin can customize the short-code according to his requirements, for example he can change in effect/out effect/animation speed/color etc here admin can show content on hover.

Step 3 Publish the page and view the page.

Preview Of Custom Image
cutomimage

Video Tutorial