[sp-demo-header title="Before%20And%20After%20ShortPoint" sub_title="The%20most%20complete%20Before%20And%20After%20for%20SharePoint,%20Office%20365%20and%20SAP%20Portal" description="Show%20two%20images%20for%20before/after%20presentation" /]
Different Styles
[divider style="double-dotted" /]
Default Style
[before-after before-image="https://www.shortpoint.com/wp-content/uploads/2017/02/before.jpg" after-image="https://www.shortpoint.com/wp-content/uploads/2017/02/after_.jpg" class="shortpoint-copy" /]
Hover Style
[before-after hover before-image="https://www.shortpoint.com/wp-content/uploads/2017/02/before.jpg" after-image="https://www.shortpoint.com/wp-content/uploads/2017/02/after_.jpg" class="shortpoint-copy" /]
Click Style
[before-after click before-image="https://www.shortpoint.com/wp-content/uploads/2017/02/before.jpg" after-image="https://www.shortpoint.com/wp-content/uploads/2017/02/after_.jpg" class="shortpoint-copy" /]
Custom Width
[divider style="double-dotted" /]
350 px width
[before-after before-image="https://www.shortpoint.com/wp-content/uploads/2017/02/before.jpg" after-image="https://www.shortpoint.com/wp-content/uploads/2017/02/after_.jpg" width="350" class="shortpoint-copy" /]
[sp-demo-doc]
Before Image – required. Before image url. For best results, after-image size need to be same as before image size
After Image – required. After image url. For best results, after-image size need to be same as before image size
Style – different transition styles:
- click – images transition style is on click
- hover – images transition style is on hover
Width - the width value in pixels[/sp-demo-doc]