Guide
- How-to
- Lightbox
- Effects
Guide
- How-to
- Lightbox
- Effects
Guide
- How-to
- Lightbox
- Effects
How to Create a Lightbox Effect in Framer
In this quick Framer blog, I’ll show you how to create a nice, proper lightbox effect for your images in your Framer projects. Expect an easy and simple solution in this video, and make sure to watch until the end for a bonus tip.
Posted by
Nandi
Table of contents
The old way
Before this update, the only way to simulate a lightbox was by using overlays.
You’d select your image, go to the right panel, and set it as an overlay. Then you’d manually adjust the Z-index, align it inside a new frame, and try to match the same image pulled from your CMS.
The old way
Before this update, the only way to simulate a lightbox was by using overlays.
You’d select your image, go to the right panel, and set it as an overlay. Then you’d manually adjust the Z-index, align it inside a new frame, and try to match the same image pulled from your CMS.
The old way
Before this update, the only way to simulate a lightbox was by using overlays.
You’d select your image, go to the right panel, and set it as an overlay. Then you’d manually adjust the Z-index, align it inside a new frame, and try to match the same image pulled from your CMS.
Using overlay.
Using overlay.
Using overlay.
Sure, it technically worked… You clicked an image, and a larger version would appear, but it didn’t feel smooth. There was no real transition or scaling animation, which made it feel static and clunky.
You could hack together some animation using an “Appear” effect or “Scale in” transition, but it still didn’t look like a true lightbox.
Introducing the new lightbox effect
Framer’s new Lightbox effect changes everything.
Here’s how it works:
Select the image you want to apply the lightbox to.
In the right panel, open the Effects section.
You’ll now see a new option called Lightbox.
This effect is applied directly to the image layer, not the component that contains it. That part’s important.
Once you’ve selected it, you’ll notice several customizable options appear:
Max width – controls how large the image can get when opened (default is 800px).
Padding – adds space around the image (default is 20px).
Z-index – ensures the lightbox sits above everything else.
Backdrop color – defines the dimmed background that appears behind the image.
Transition – lets you tweak the animation for how it opens.
That’s it. You just turn it on, adjust a few values, and you’ve got a perfectly smooth, interactive lightbox.
Sure, it technically worked… You clicked an image, and a larger version would appear, but it didn’t feel smooth. There was no real transition or scaling animation, which made it feel static and clunky.
You could hack together some animation using an “Appear” effect or “Scale in” transition, but it still didn’t look like a true lightbox.
Introducing the new lightbox effect
Framer’s new Lightbox effect changes everything.
Here’s how it works:
Select the image you want to apply the lightbox to.
In the right panel, open the Effects section.
You’ll now see a new option called Lightbox.
This effect is applied directly to the image layer, not the component that contains it. That part’s important.
Once you’ve selected it, you’ll notice several customizable options appear:
Max width – controls how large the image can get when opened (default is 800px).
Padding – adds space around the image (default is 20px).
Z-index – ensures the lightbox sits above everything else.
Backdrop color – defines the dimmed background that appears behind the image.
Transition – lets you tweak the animation for how it opens.
That’s it. You just turn it on, adjust a few values, and you’ve got a perfectly smooth, interactive lightbox.
Sure, it technically worked… You clicked an image, and a larger version would appear, but it didn’t feel smooth. There was no real transition or scaling animation, which made it feel static and clunky.
You could hack together some animation using an “Appear” effect or “Scale in” transition, but it still didn’t look like a true lightbox.
Introducing the new lightbox effect
Framer’s new Lightbox effect changes everything.
Here’s how it works:
Select the image you want to apply the lightbox to.
In the right panel, open the Effects section.
You’ll now see a new option called Lightbox.
This effect is applied directly to the image layer, not the component that contains it. That part’s important.
Once you’ve selected it, you’ll notice several customizable options appear:
Max width – controls how large the image can get when opened (default is 800px).
Padding – adds space around the image (default is 20px).
Z-index – ensures the lightbox sits above everything else.
Backdrop color – defines the dimmed background that appears behind the image.
Transition – lets you tweak the animation for how it opens.
That’s it. You just turn it on, adjust a few values, and you’ve got a perfectly smooth, interactive lightbox.
Lightbox effect.
Lightbox effect.
Lightbox effect.
Customizing your lightbox
When you preview the site and click the image, you’ll notice it now scales up smoothly, the background dims softly, and the image expands to a larger size in the center. It looks clean, professional, and exactly like you’d expect a modern lightbox to behave.
Even better: if your image is inside a component, the effect will automatically apply to all instances of that component. So if you’re displaying a grid of CMS images, you only need to set it up once.
Important tip: Disable image dragging
Here’s something most people miss. When you add a lightbox effect to an image, it means that image is clickable. Sometimes when clicking and dragging even slightly, the browser might try to drag the image instead of triggering the lightbox, which feels buggy.
To fix that, set your image’s Draggable property to No. This ensures that even if the user moves their cursor while clicking, the lightbox still opens smoothly instead of dragging the image around.
Bonus tip: Add a zoom cursor
To make the effect feel even more polished, change your Web Cursor to one that visually hints at interactivity, like a magnifying glass with a plus icon.
It tells users: “Hey, click me — I’ll zoom in!” It’s a small detail, but it adds a ton of clarity to the experience.
Wrapping up
And that’s it. A real, native lightbox in Framer.
No overlays, no messy setups, no code. Just a single built-in effect that makes your image galleries feel elegant and interactive. If you haven’t tried it yet, open your project in Framer and play around with it.
Customizing your lightbox
When you preview the site and click the image, you’ll notice it now scales up smoothly, the background dims softly, and the image expands to a larger size in the center. It looks clean, professional, and exactly like you’d expect a modern lightbox to behave.
Even better: if your image is inside a component, the effect will automatically apply to all instances of that component. So if you’re displaying a grid of CMS images, you only need to set it up once.
Important tip: Disable image dragging
Here’s something most people miss. When you add a lightbox effect to an image, it means that image is clickable. Sometimes when clicking and dragging even slightly, the browser might try to drag the image instead of triggering the lightbox, which feels buggy.
To fix that, set your image’s Draggable property to No. This ensures that even if the user moves their cursor while clicking, the lightbox still opens smoothly instead of dragging the image around.
Bonus tip: Add a zoom cursor
To make the effect feel even more polished, change your Web Cursor to one that visually hints at interactivity, like a magnifying glass with a plus icon.
It tells users: “Hey, click me — I’ll zoom in!” It’s a small detail, but it adds a ton of clarity to the experience.
Wrapping up
And that’s it. A real, native lightbox in Framer.
No overlays, no messy setups, no code. Just a single built-in effect that makes your image galleries feel elegant and interactive. If you haven’t tried it yet, open your project in Framer and play around with it.
Customizing your lightbox
When you preview the site and click the image, you’ll notice it now scales up smoothly, the background dims softly, and the image expands to a larger size in the center. It looks clean, professional, and exactly like you’d expect a modern lightbox to behave.
Even better: if your image is inside a component, the effect will automatically apply to all instances of that component. So if you’re displaying a grid of CMS images, you only need to set it up once.
Important tip: Disable image dragging
Here’s something most people miss. When you add a lightbox effect to an image, it means that image is clickable. Sometimes when clicking and dragging even slightly, the browser might try to drag the image instead of triggering the lightbox, which feels buggy.
To fix that, set your image’s Draggable property to No. This ensures that even if the user moves their cursor while clicking, the lightbox still opens smoothly instead of dragging the image around.
Bonus tip: Add a zoom cursor
To make the effect feel even more polished, change your Web Cursor to one that visually hints at interactivity, like a magnifying glass with a plus icon.
It tells users: “Hey, click me — I’ll zoom in!” It’s a small detail, but it adds a ton of clarity to the experience.
Wrapping up
And that’s it. A real, native lightbox in Framer.
No overlays, no messy setups, no code. Just a single built-in effect that makes your image galleries feel elegant and interactive. If you haven’t tried it yet, open your project in Framer and play around with it.
