Image Split Reveal — Split-reveal hover effect for images

What is Image Split Reveal?

Image Split Reveal is a premium hover interaction component that creates a dramatic split effect on images. On hover, the image separates into two halves revealing customizable text content with smooth animations. Ideal for portfolios, landing pages, product showcases, hero sections, and any design that needs a memorable first impression.

Core Features

• Four split animation styles: Horizontal, Vertical, Diagonal, and Curved

• Animated line divider between headline and subtitle

• Customizable text with separate font controls

• Optional CTA button with slide-fill hover animation

• Gradient overlay

• Custom cursor option for enhanced interactivity

• Fully responsive

Controls inside Framer

Image

• Responsive image picker

Headline

• Text content

• Font size

• Font family

Subtitle

• Text content

• Font size

• Font family

Animation

• Split style (Horizontal, Vertical, Diagonal, Curved)

• Split distance

• Text animation (Fade, Slide, Scale, Blur)

Text Style

• Text color

• Show backdrop toggle

• Backdrop color

Button

• Show button toggle

• Button text

• Link

• Button color

• Text color

• Font family

Effects

• Gradient overlay toggle

• Gradient color

• Gradient opacity

Custom Cursor

• Enable toggle

• Cursor color

• Cursor size

Best use cases

• Portfolio hero sections with dramatic image reveals

• Product showcases with hover-to-explore interactions

• Landing page feature highlights

• Gallery and case study presentations

• Agency and creative studio websites

Elevate your Framer projects with premium hover interactions that captivate visitors and create lasting impressions.