Create instant visual impact with image or global block comparisons, multiple slider directions, custom handles, and labels.

The Phox Before After element lets you present two versions of content in one clean, interactive component.
Perfect for showcasing results, redesigns, edits, product upgrades, and side-by-side comparisons.

Use it with:

• Images
• Global blocks
• Horizontal, vertical, diagonal, and radial interactions
• Drag, hover, or click behavior

Key Features

• Interactive before/after slider
• Multiple reveal directions:
  • Horizontal
  • Vertical
  • Diagonal (both directions)
  • Radial
• Customizable divider line:
  • Color
  • Width
  • Style
  • Shadow
• Flexible handle options:
  • Arrows
  • Circle
  • Custom icon
  • Line-only
• Label controls:
  • On/off
  • Position
  • Background
  • Typography
• Overlay support for each side
• Focus points for each image
• Animate on visible
• Keyboard accessible slider behavior