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 WordPress plugin that enhances your site visuals by adding captivating hover effects to your images. Perfect for Visual Composer users."

★★★★★ (3) Active Installs: 4000+ Tested with: 6.0.6 PHP Version: false

Included Shortcodes:

• [ihe-vc]

Image Hover Effects For WPBakery Page Builder [ihe-vc] Shortcode

The Image Hover Effects for Visual Composer shortcode enables customization of image hover effects. It allows users to modify hover effects, image attributes, and caption details. The shortcode accepts parameters like hover_effect, image_id, title, desc, and more. It enqueues the necessary stylesheets, retrieves the image URL, and includes the hover effect rendering file.

Shortcode: [ihe-vc]

Parameters

Here is a list of all possible ihe-vc shortcode parameters and attributes:

• hover_effect – Specifies the type of hover effect to use
• image_id – The ID of the image to be displayed
• title – The title text to be displayed on hover
• desc – The description text to be displayed on hover
• caption_url – The URL to be opened when the caption is clicked
• caption_url_target – Determines where the caption URL opens
• caption_bg – Sets the background color of the caption
• title_size – Determines the size of the title text
• desc_size – Sets the size of the description text
• title_clr – Specifies the color of the title text
• title_bg – Sets the background color of the title text
• desc_clr – Sets the color of the description text
• border_width – Specifies the width of the image border
• border_style – Determines the style of the image border
• border_color – Sets the color of the image border
• style – Specifies the style to be applied to the image hover
• caption – Determines the direction of the caption slide effect

Examples and Usage

Basic example – A simple usage of the ‘ihe-vc’ shortcode to apply a hover effect to an image. The image is referenced by its ID, and the desired hover effect is specified.

[ihe-vc hover_effect="slide-left-to-right" image_id=123 /]

Advanced examples

Utilizing the ‘ihe-vc’ shortcode to apply a hover effect to an image with additional styling parameters. Here, the image is referenced by its ID, the hover effect is specified, and additional parameters for title, description, caption URL, and design elements are also defined.

[ihe-vc hover_effect="NoEffect" image_id=456 title="My Image" desc="This is a description" caption_url="http://example.com" title_size="20" desc_size="14" title_clr="#000000" title_bg="#ffffff" desc_clr="#333333" border_width="2" border_style="solid" border_color="#000000" style="ihover" caption="slide-left-to-right" /]

Applying a hover effect to an image with a dynamic content. In this case, the content is removed from autop formatting to prevent WordPress from adding unwanted

and
tags. This allows for more complex content to be included in the hover effect, such as additional shortcodes or HTML.

[ihe-vc hover_effect="slide-left-to-right" image_id=789]Your content here, including other shortcodes or HTML.[/ihe-vc]

PHP Function Code

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

Shortcode line:

add_shortcode( 'ihe-vc', array( $this, 'render_ihe_shortcode' ) );

Shortcode PHP function:

function render_ihe_shortcode($attrs, $content = null) {
		extract( shortcode_atts( array(
			'hover_effect' 			=> 		'NoEffect',
			'image_id'				=>		'',
			'title'					=>		'',
			'desc'					=>		'',
			'caption_url'			=>		'',
			'caption_url_target'	=>		'',
			'caption_bg'			=>		'',
			'title_size'			=>		'',
			'desc_size'				=>		'',
			'title_clr'				=>		'',
			'title_bg'				=>		'',
			'desc_clr'				=>		'',
			'border_width'			=>		'0',
			'border_style'			=>		'solid',
			'border_color'			=>		'',
			'style' 				=> 		'ihover',
			'caption' 				=> 		'slide-left-to-right',
		), $attrs ) );
		wp_enqueue_style( 'image-hover-effects-css', plugins_url( 'css/ihover.css' , __FILE__ ));
		wp_enqueue_style( 'image-caption-hover-css', plugins_url( 'css/caption.css' , __FILE__ ));
		if ($image_id != '') {
			$image_url = wp_get_attachment_url( $image_id );		
		}
		$content = wpb_js_remove_wpautop($content, true);
		ob_start();		
		include 'render/hover.php';
		return ob_get_clean();
	}

Code file location:

image-hover-effects-for-visual-composer/image-hover-effects-for-visual-composer/main.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.