Before & After Shortcodes

Smooth Version

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

  1. Before
  2. After
Get The Code

[before_after width="719" height="404" before_src="/wp-content/uploads/2013/06/banda_before_1_v01.png" after_src="/wp-content/uploads/2013/06/banda_after_1_v01.png"]

Flip Version

Click the handler at the bottom.

  1. Before
  2. After
Get The Code

[before_after width="719" height="404" before_src="/wp-content/uploads/2013/06/banda_before_1_v01.png" after_src="/wp-content/uploads/2013/06/banda_after_1_v01.png" type="flip"]

Hover

Hover over the image to show its alternative version.

  1. Before
  2. After
Get The Code

[before_after width="719" height="404" before_src="/wp-content/uploads/2013/06/banda_before_1_v01.png" after_src="/wp-content/uploads/2013/06/banda_after_1_v01.png" type="hover"]

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