[design-elements-header icon="https%3A%2F%2Fassets-global.website-files.com%2F60953231b313b56665e6e317%2F6156f5e218ab6226f9b9d5c6_before_and_after.svg" title="Before%20And%20After" description="Graphically%20display%20transitions%2C%20changes%2C%20or%20reveals%20with%20the%20Before%20And%20After%20Design%20Element.%20Present%20an%20initial%20image%20that%20transforms%20into%20a%20final%20image%20with%20a%20swipe%2C%20click%20or%20hover%20of%20the%20mouse." /]
Different Styles
[divider style="double-dotted" /]
Default Style
[before-after before-image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F02%2Fbefore.jpg" after-image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F02%2Fafter_.jpg" class="shortpoint-copy" /]
Hover Style
[before-after hover before-image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F02%2Fbefore.jpg" after-image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F02%2Fafter_.jpg" class="shortpoint-copy" /]
Click Style
[before-after click before-image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F02%2Fbefore.jpg" after-image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F02%2Fafter_.jpg" class="shortpoint-copy" /]
Custom Width
[divider style="double-dotted" /]
350 px width
[before-after before-image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F02%2Fbefore.jpg" after-image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F02%2Fafter_.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]