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.
Displaying Image Switch
To add image switch showcase shortcode:
| Setting | Descripiton |
|---|---|
| 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 |
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.
