Blur Reveal Card

Blur Reveal Card – Hover Zoom-Blur Testimonial Card with Bottom Text Reveal

Blur Reveal Card is a modern, interactive Framer component that transforms a simple portrait image into a cinematic testimonial showcase. Instead of showing the quote at all times, it displays a clean full-bleed photo by default, and on hover the image subtly zooms in, blurs, and dims while the quote, avatar, name, and designation rise up from the bottom. The layered motion gives your testimonials, team bios, or client showcase a premium, editorial feel with almost no setup required.

Hover Zoom-Blur Interaction

• Image zooms in slightly and blurs on hover for a cinematic effect.

• Quote, avatar, name, and designation fade and slide up from the bottom.

• Smooth, eased transitions feel natural and intentional.

• Returns to the default sharp image state when the cursor leaves.

• Fully responsive and optimized for modern GPU-accelerated performance.

Customizable Design Controls Blur Reveal Card includes full Framer property controls so you can instantly match it to your brand or layout.

Customize

• Name & Designation – Edit the reviewer's name and title.

• Image – Assign the background portrait image.

• Text – Edit the testimonial quote.

• Title Color & Size – Adjust the quote's color and font size.

• Text Color & Size – Adjust body text color and font size.

• Name Color & Size – Adjust the name's color and font size.

• Designation Color & Size – Adjust the designation's color and font size.

• Transition – Choose the easing style for the hover animation.

How It Works Blur Reveal Card tracks the cursor's hover state on the card. When a visitor hovers, the component smoothly zooms and blurs the background image while the quote, avatar, name, and designation fade and slide up into view using layered motion transitions. When the cursor moves away, the card gracefully returns to its sharp, default state, ready for the next interaction.