Before & After Shortcodes

Smooth Version

Just move the mouse over the image or swipe on touch devices.

  1. Before
  2. After
Get The Code

  1. Before
  2. After

Flip Version

Click the handler at the bottom.

  1. Before
  2. After
Get The Code

  1. Before
  2. After

Hover

Hover over the image to show its alternative version.

  1. Before
  2. After
Get The Code

  1. Before
  2. After

Shortcode documentation

  • id
    The id attribute specifies an id for an HTML element.
    It must be unique within the HTML document.
    (Mainly for additional styling/scripting purposes)
  • class
    The class attribute specifies a class name for an HTML element.
    (Mainly for additional styling/scripting purposes)
  • type
    Available Options:
    • smooth - Splitted image
    • flip - Flip image on click
    • hover - Change on hover
  • before_src
  • after_src
  • width
    The width in pixels
  • height
    The height in pixels