Image Switch Shortcode

Updated on November 17, 2017

Image Switch shortcode allows you display two images overlayed on each other with a switching capability when a user hovers the mouse over them. It comes useful to gain user attention when you want to show them something noticeable.

In this article, we will explain using the Image Switch shortcode and configuring it’s options.

To see Image Switch shortcode in action, you may check out the demo page.

Image Switch shortcode - demo

Displaying Image Switch

To add image switch showcase shortcode:

1Add or edit an existing page.
2In Visual Composer section, Click + button.

Image Switch shortcode - visual composer section

3In Add Element pop-up screen, search for Image Switch and click on it to be added to the page.

Image Switch shortcode - add element

4When the shortcode is added, a new pop-up screen called Image Switch Settings opens. It allows you to configure the shortcode settings.

Image Switch shortcode - Image Switch settings

5Configure the settings as required. Other settings are explained in next sections.

Upload Your First Image The first image address. It will show by default.
Upload Your Second Image The second image address. It will show by mouse hover or finger gesture.
Image Hover Animation Defines the fade effect for switching images. There are two options available, Without Fading, Fading
5Click Save Changes and publish or update the page to check the result.

Configuring the Settings

After you added the Image Switch shortcode, a pop up window will appear where you can set options for this shortcode. Below is the detailed description of each option for Image Gallery shortcode.

Configuring Image Dimension

The shortcode allows you to define custom width and height for the images.

Setting Description

Image Width Defines the images width in pixel.
Image Height Defines the images height in pixel.
Image Cropping If enabled, crops the images based on defined width and height otherwise use the first image width for the image container.
SVG Enable? Sets the max-width property for the SVG image.

Configuring Spacing and Link

You can align, add margin and links to the images by the use of following settings.

Setting Description

Align Defines the alignment of the images in the container. Three options are available: Left, Right, Center
URL (Link) Adds a link to the images so they are clickable.
Margin Bottom Defines the amount of bottom margin in pixel for the images.

Adding an Entrance Animation

Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll in the browser.

You can read Configuring shortcode’s entrance animation article for further explanation.

Adding an Extra Class Name

Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read Adding custom CSS class to a shortcode article for further explanation.

Did this answer your question?