Image Switch Shortcode

Last Updated on

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

In this article


Displaying Image Switch

To add image switch showcase shortcode:

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

Image Switch shortcode - visual composer section

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

Image Switch shortcode - add element

4
When 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

5
Configure the settings as required. Other settings are explained in next sections.
SettingDescripiton
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
5
Click 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.

x
Info: To open the pop-up again, mouse over the shortcode and click on the Pen button.

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.

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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket