Fullscreen Overlay Effects

Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.

FullscreenOverlayStyles

View demo Download source

Today we’d like to share some inspiration on fullscreen overlay styles and effects with you. Like with any UI component, there are new trends and styles emerging and we’d like to try out some subtle, as well as fancy effects for overlays. The special thing about these overlays is that they don’t have a fixed size like modals but they occupy all the screen, so when creating effects one has to take that into account and not overdo it. But that does not mean that we can’t go crazy and use some fresh and interesting effects, like, for example, morphing SVG shapes.

Note that these effects were created with modern browsers in mind so they might not show the desired effect in older ones. You should, of course, provide some kind of fallback for older browsers.

An example for a subtle, yet interesting effect is the first one which got inspired by the same effect on Huge. The idea is to fade in the overlay and to rotate what’s inside slightly in 3D:

.overlay-hugeinc {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-hugeinc.open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s;
}

.overlay-hugeinc nav {
	perspective: 1200px;
}

.overlay-hugeinc nav ul {
	opacity: 0.4;
	transform: translateY(-25%) rotateX(35deg);
	transition: transform 0.5s, opacity 0.5s;
}

.overlay-hugeinc.open nav ul {
	opacity: 1;
	transform: rotateX(0deg);
}

.overlay-hugeinc.close nav ul {
	transform: translateY(25%) rotateX(-35deg);
}

We use the visibility trick to make the overlay disappear completely: we set a transition delay for the visibility property which allows the opacity to be transitioned first.

For some of the SVG examples we use Snap.svg to morph a path into another one. For the “little boxes” example we used SVG with some JS to control the appearing of the boxes, but you could of course also use CSS for the control or not use SVG at all.

We hope you enjoy these effects and find them inspiring!

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 147

Comments are closed.
  1. 2

    Nice post. I wonder how to make that overlay link fade out once we clicked. Like in the HUGE.inc ?

    If we link some other page. It’s closing. I wanted it to give a transition.

    • 4

      Hey Wilbert, Have you find the solution yet ? I have been playing with it quite some time but, i could not get it though,

      While we close the Menu Overlay that Animation is happening not when we click.

  2. 12

    Nice, but does the overlay close when you select a menu item? I mean if you got a 1-paged website that would be required offcourse.

  3. 15

    This is really nice and it works from IE9+, well some effects do not really shine in IE9 but the overlay shows and the menu is usable, so no fallback necessary. I’m amazed, how you constantly come up with such brilliant ideas.

  4. 19

    Man, these tuts are just amazing! Love that you are always pushing the envelope. Just sucks about IE because really I’d just go all-out using CSS for animations instead of or in combination with JavaScript, only providing a fallback (or not at all as long as degrades gracefully) when absolutely necessary.

    Big up!

    • 20

      If you can live with IE9 as minimum requirement and select the effect wisely, you can use (some of) these effects today.

  5. 21

    Oh my, I will definitely gonna use these in one of my future projects. Never gotten bored reading articles here at codrops.

Comments are closed.