Image Hover Effects For WPBakery Page Builder Shortcode

Below, you’ll find a detailed guide on how to add the Image Hover Effects For WPBakery Page Builder Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Image Hover Effects For WPBakery Page Builder Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Image Hover Effects For WPBakery Page Builder Plugin and the shortcodes it provides:

Image Hover Effects For WPBakery Page Builder

"Image Hover Effects For WPBakery Page Builder is a dynamic plugin that enhances your WordPress site with stunning hover effects. This plugin transforms your visual compositions with its immersive features."

★★★★✩ (13) Active Installs: 5000+ Tested with: 6.1.4 PHP Version: false

Included Shortcodes:

• [image-hover-effects-vc-free]

[image-hover-effects-vc-free] Shortcode

The Image Hover Effects Visual Composer Extension shortcode enables users to add image hover effects to their WordPress site. It extracts attributes like heading, caption URL, image, style, hover effect, and caption direction. The PHP function ‘render_image_hover_shortcode’ enqueues the necessary CSS file and removes unnecessary wpautop from the content. It also retrieves the image URL if an image ID is provided. The output is then returned after including the ‘render_hover_effects.php’ file.

Shortcode: [image-hover-effects-vc-free]

Parameters

Here is a list of all possible image-hover-effects-vc-free shortcode parameters and attributes:

• ihe_heading – Defines the heading of the image hover effect.
• caption_url – Specifies the URL to be opened when the caption is clicked.
• caption_url_target – Determines whether the URL opens in the same or new window.
• ihe_image – Specifies the image to display for the hover effect.
• caption_style – Sets the style of the caption; options include ‘circle’.
• hover_effect – Determines the type of hover effect; default is ‘effect1’.
• caption_direction – Controls the direction of the caption animation from ‘left_to_right’.
• caption_direction_square – Controls the caption animation direction for square images from ‘top_to_bottom’.

Examples and Usage

Basic example – The following shortcode displays an image with a hover effect. The image is referenced by its ID, and the default hover effect is used.

[image-hover-effects-vc-free ihe_image=1 /]

Advanced examples

Here, the shortcode is used to display an image with a specified hover effect. The image is referenced by its ID, and the ‘effect1’ hover effect is selected. Additionally, the caption direction is set to ‘left_to_right’.

[image-hover-effects-vc-free ihe_image=1 hover_effect='effect1' caption_direction='left_to_right' /]

In this example, the shortcode is used to display an image with a specified caption style and direction. The image is referenced by its ID, the caption style is set to ‘circle’, and the caption direction for square images is set to ‘top_to_bottom’.

[image-hover-effects-vc-free ihe_image=1 caption_style='circle' caption_direction_square='top_to_bottom' /]

This shortcode example displays an image with a specified heading and a URL. The image is referenced by its ID, the heading is set to ‘My Image’, and the URL is set to ‘https://example.com’.

[image-hover-effects-vc-free ihe_image=1 ihe_heading='My Image' caption_url='https://example.com' /]

PHP Function Code

In case you have difficulties debugging what causing issues with [image-hover-effects-vc-free] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'image-hover-effects-vc-free', array( $this, 'render_image_hover_shortcode' ) );

Shortcode PHP function:

function render_image_hover_shortcode($attrs, $content = null){ 
		extract(shortcode_atts( array(
		    'ihe_heading'					=> "",
		    "caption_url"					=> '',
		    "caption_url_target"			=> '',
		    "ihe_image"						=> '',
		    "caption_style"					=> 'circle',
		    "hover_effect"					=> 'effect1',
		    "caption_direction"				=> 'left_to_right',
		     "caption_direction_square"		=> 'top_to_bottom',
		), $attrs));

		wp_enqueue_style( 'image-hover-css-free', plugins_url( 'css/image-hover.css' , __FILE__ ));

		$content = wpb_js_remove_wpautop($content, true);
		if ($ihe_image != '') {
			$image_url = wp_get_attachment_url( $ihe_image );		
		}
		ob_start();
		include 'includes/render_hover_effects.php'; 
		return ob_get_clean();
	}

Code file location:

image-hover-effects-visual-composer-extension/image-hover-effects-visual-composer-extension/plugin.class.php

Conclusion

Now that you’ve learned how to embed the Image Hover Effects For WPBakery Page Builder Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.