# Image Comparison


# Shortcode Syntax

Use the shortcode for a quick before/after slider:


![Before](images/before.svg)![After](images/after.svg)


# Custom Labels


![v0.8](images/before.svg)![v0.9](images/after.svg)


# Custom Start Position

Start the divider at 30% (showing mostly the "after" image):


![Before](images/before.svg)![After](images/after.svg)


# Vertical Split


![Before](images/before.svg)![After](images/after.svg)


# Fenced Div Syntax

The fenced div syntax offers more control:


![Before](images/before.svg)![After](images/after.svg)


# Fenced Div with Options


![Old Design](images/mosaic-a.svg)![New Design](images/mosaic-c.svg)