Image Spotlight

Image Spotlight brings your visuals to life with an interactive, cinematic effect. As users move their mouse over the image, a radial spotlight follows the pointer, revealing the image in focus while the rest dims under a semi-transparent overlay. Add a 3D perspective tilt for extra depth, giving your content a premium, engaging feel.

✨ Key Features

• Mouse-following spotlight — Radial reveal follows cursor precisely.

• 3D tilt effect — Adds subtle perspective rotation based on pointer position.

• Customizable overlay — Control opacity and intensity of the darkened background.

• Spotlight size control — Adjust the focus area to suit your design.

• Border radius & styling — Easily match your layout with smooth rounded corners.

• Performance optimized — Lightweight, CSS-driven effects for smooth interactions.

💡 Use Cases

• Creative portfolios and photography showcases

• Product galleries or hero sections

• Interactive web campaigns

• Hover-preview effects for editorial or design sites

🎨 How to Use

1. Drag Image Spotlight into your Framer canvas.

2. Select an image or upload your own.

3. Adjust Spotlight Size and Overlay Opacity to control the reveal effect.

4. Fine-tune Border Radius to match your design style.

5. Hover over the image to see the radial spotlight and 3D tilt in action.

Bring interactivity and depth to your images with Image Spotlight, making every hover an engaging, cinematic experience.