---
title: "X-Ray Hover Reveal — Free Framer component · Best of Framer"
description: "Free Framer component · by Orix Studio · Interactive. The X-Ray Hover Reveal is a professional-grade masking tool designed for high-impact visual storytelling."
canonical: "https://framer.elliotli.dev/component/x-ray-hover-reveal"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/X-Ray Hover Reveal

# X-Ray Hover Reveal

Interactive image masking and reveal

[View on Framer](https://framer.com/marketplace/components/x-ray-hover-reveal/?via=elliot-li)

![X-Ray Hover Reveal preview image 1](https://framer.elliotli.dev/og/component/x-ray-hover-reveal/05429d06a5ac96cf/1600x1200.jpg)

## Summary

The X-Ray Hover Reveal is a professional-grade masking tool designed for high-impact visual storytelling.

## Description

The **X-Ray Hover Reveal** is a professional-grade masking tool designed for high-impact visual storytelling. It allows users to "peek" through a primary image to reveal a secondary layer beneath, perfect for before/after comparisons, product internals, or creative portfolio highlights.

**How to Use**

1.  **Setup:** Drag the component onto your canvas. In the properties panel, upload your **Top Image** (the one visible by default) and your **Bottom Image** (the one to be revealed).
    
2.  **Choose Your Interaction:**
    
    -   Use **Hover** for a classic discovery feel.
        
    -   Use **Click** or **Hold** for intentional user engagement.
        
    -   Use **Always** for a permanent decorative mask.
        
3.  **Configure the Reveal:** Select your **Reveal Direction**. Choose **Cursor** for a radial spotlight that follows the mouse, or pick a directional swipe (e.g., Left to Right).
    
4.  **Style & Feel:** Adjust the **Reveal Size** and **Softness** to create either a sharp cut or a glowing feathered edge.
    
5.  **Advanced Effects:** Add a **Tint** to the bottom image for a blueprint effect, or increase the **Zoom** level to give a "magnifying glass" feel to the reveal area.
    

**Pro Features**

-   **Custom Cursors:** Upload your own SVG or PNG to replace the default cursor when hovering over the component.
    
-   **Performance:** If using high-resolution images, set the **FPS Limit** to 30 to ensure smooth performance on lower-end devices.
    
-   **Mobile Optimized:** The component automatically translates mouse movements to touch-drag gestures on mobile devices.
    

**Best Practices**

-   Ensure both images have the same aspect ratio for the most seamless transition.
    
-   Use the **Motion Smoothing** toggle to add a premium, weighted feel to the cursor movement.
    

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

-   All · #2869

## Details

- **Author**: Orix Studio
- **Published**: 2026-04-17
- **Updated**: 2026-06-14
- **Added**: 2026-04-06
- **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