×

What are Overlays and how do I use them?

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 repurpose your overlay in screens across your prototype.

That means you can use overlays to...

  • 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?

Overlays are a new link type which let 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.

  1. Open your prototype and view a screen.

  2. In the toolbar, switch to Build Mode (B).

  3. Create a hotspot and select “Screen as Overlay” from your Link To options.

  4. 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 from the drop-down menu.

  5. In the next drop down, select screen which 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.
  6. 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.

  7. Select a Transition type to animate your overlay, or use Instant for no animation.

  8. 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.

  9. Change additional options, as desired.

    1. Reverse transition on Close link – If selected, your Transition will animate on both open and close of the Overlay.
    2. Close on clicking outside of overlay – If selected, a click outside of your Overlay will to return to the screen underneath.
    3. Fix position of overlay – If selected, your Overlay will not scroll along with the rest of the page.
  10. Include your hotspot in a template, if desired.

  11. Save your hotspot and preview with the Share button!

FAQs

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 you want on the screen you are using as an overlay, and even use the “Link Back / Close” option on the target screen to get your viewer 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 that the only method of closing your overlay is to click on 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. Our next release will include even more tools specifically designed for mobile prototypes, so don’t forget to subscribe to our blog and you’ll be the first to 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 affect 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.