What are Overlays?
Overlays give you the power to overlay and animate one screen on top of another. Overlays can simulate modal windows, dropdown navigation menus, and other on-screen prompts—all without leaving your current screen. What’s more, simply add your hotspot to a template, and you can then repurpose your overlay in screens across your prototype.
That means you can use overlays for the following:
- Easily set up dropdowns & modals
- Include dropdowns and modals in your prototype hotspot templates
- Display overlays either on click or hover
- Customize the position and animation type of your overlay
- Set custom background colors and opacity levels on your overlay
How do I use Overlays?
An overlay is a link type that lets you link to another screen as an overlay, rather than as a separate destination screen. That makes it simple to implement overlays into your existing workflow: Just export your modals and menus as separate files, or use our shortcut symbols in your source files with InVision Sync.
Open your prototype and view a screen.
In the toolbar, switch to Build Mode (B).
Create a hotspot and select Screen as Overlay from your Link To options.
Select whether you want your overlay to appear on Click or Hover. If you’d like your overlay to appear on hover, also decide whether you would like to Stay on target screen when your overlay is opened. If you select this option (ON), your overlay will stay open until you click outside of the overlay, and/or on a Link Back / Close hotspot set on your overlay screen. If you leave this option un-checked (OFF), your overlay will disappear once your mouse moves off of the hotspot, so be sure to set your hotspot large enough to cover the intended mouseover area.
Note: Hotspots within a hover overlay won’t be interactive if the Stay on target screen option is unchecked.
If you're working on a mobile prototype, select your gesture type from the drop-down menu.
- In the next drop-down, select the screen you would like to use for your overlay. Or use the Browse function to bring up the screen drawer and select another screen from your prototype.
Set your position from among several common options, and use the input boxes (where available) to define an offset. Or select the Custom option to assign a custom position for your overlay, and press Enter to set your position.
Select a transition type to animate your overlay, or use Instant for no animation.
Change the BG setting to increase the opacity of your background layer. The color of this background layer will be pulled from the background color set on the target screen for your overlay.
Note: For mobile prototypes, please follow the steps in this article: Why is my background color wrong on my mobile prototype?
Change additional options, as desired.
- Reverse transition on Close link: If selected, your Transition will animate on both open and close of the overlay.
- Close on clicking outside of overlay: If selected, a click outside of your overlay will return the user to the screen underneath.
- Fix position of overlay: If selected, your overlay will not scroll along with the rest of the page.
Include your hotspot in a template, if desired.
Save your hotspot and preview with the Share button!
Can I link to another screen from my Overlay?
Yes, hotspots set on your overlay screen will be active even in Overlays mode. So you can include as many hotspots as you want on the screen you are using as an overlay and can even use the Link Back / Close option on the target screen to get your viewers back to where they came from, before triggering an overlay.
Can I use a custom close button on my hotspot?
Yes, just create a hotspot with a target destination of Link Back / Close within your overlay screen. Anywhere your overlay is used, this hotspot can be used to close the overlay. If combined with the Close on clicking outside of overlay option turned on, viewers can use either method to close the overlay. It is also possible to turn off Close on clicking outside so the only method of closing your overlay is to click the hotspot that you have assigned.
Can I still use Overlays with fixed headers and footers?
Yes, of course! Overlays will appear above fixed headers and footers, while page content will still display behind fixed headers and footers.
Will Overlays work on tablet and mobile prototypes?
Yes, overlays will work on tablet and mobile—both on desktop and on device. New releases sometimes include even more tools specifically designed for mobile prototypes, so don’t forget to subscribe to our blog to stay in the know!
Can I use an Overlay within an Overlay? What happens if I do?
You can add an overlay hotspot to an existing overlay screen without issue. When you activate the overlay hotspot, the new overlay will appear. However, overlays are all relative to the original screen. That means that the new overlay will appear over the original screen still, not over the preceding overlay. When you finally close the overlay, you'll be returned to the original screen as well.
Why doesn’t the background opacity slider do anything?
The background opacity setting for overlays uses the overlay screen’s background color. If no background color is defined or the defined background color is mostly transparent, then the opacity slider won’t have any effect on the opacity of the overlay background. This can especially be problematic for mobile prototypes where background color can’t be directly set. See Why is my background color wrong on my mobile prototype? for more on background color in mobile screens.
How do I get my overlay to have a semi transparent background?
If you need a background image to have some opacity, then you would want to build it into the image. The BG % setting for an overlay only controls the opacity of background color, but does not affect the background image itself, if you've configured one.
Where do I go if I have feedback or questions about Overlays?
If you have any feedback or questions about overlays, we’d love to hear from you! Contact us to share your thoughts.
Why is my overlay sizing off?
Overlay sizing is affected when the parent screen is retina, but the overlay screen is not. A simple fix is to change the size of either screen to match the other screen in proportion, and you should be all set.