---
title: "CMS Image Comparison — Free Framer component · Best of Framer"
description: "Free Framer component · by Igor Reif · Interactive. Before / After image slider"
canonical: "https://framer.elliotli.dev/component/cms-image-comparison"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/CMS Image Comparison

# CMS Image Comparison

Before / After image slider

[View on Framer](https://framer.com/marketplace/components/cms-image-comparison/?via=elliot-li)

![CMS Image Comparison preview image 1](https://framer.elliotli.dev/og/component/cms-image-comparison/a0c730f7e4920ee9/1600x1200.jpg)

## Summary

Before / After image slider

## Description

## Eliminate extra clicks using hover-driven split controls for a simpler user experience, paired with a subtle scroll peek that draws the eye and encourages interaction. SEO optimized with Framer CMS and custom cursor support.

### _FEATURES_

-   **_Full Framer CMS Integration._** Bind foreground/background images and alt text directly to dynamic CMS collection fields.
    
-   **_Fully Accessible & Touch Ready._** Built in touch action overrides, pointer event management, and dynamic alt text props.
    
-   **_Hover Interaction & Snap to Center._** Control the split position on pointer hover with optional auto-return to center on mouse leave.
    
-   **_Auto-Reveal on Scroll._** Trigger an automated peek animation when component scrolls into view, with configurable duration, delay, and repeat settings.
    
-   **_Custom Skew Angle._** Apply angled split masks across both horizontal and vertical axes without distorting image aspect ratios.
    
-   **_3D Parallax Depth._** Add subtle interactive tilt and depth scale on mouse hover.
    
-   **_Soft Edge Feathering._** Blend comparison layers seamlessly using custom mask feathering instead of a hard cut line.
    

### TAGS

`Image Comparison` `Before After` `Before After Slider` `Compare Images` `Image Slider` `Visual Comparison` `Parallax` `Auto Reveal`

## Rank history [How rankings work →](/terms#rankings)

-   All · #3731

## Details

- **Author**: Igor Reif
- **Published**: 2026-08-11
- **Updated**: 2026-08-11
- **Added**: 2026-08-11
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase