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.

By Manoela Ilic in Playground on
Demo Code

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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Image Layer Animations with Clip-Path

Create an Abstract Image Slideshow with OGL, GLSL, and GSAP

Some On-Scroll Text Highlight Animations

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 147

Comments are closed.

  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.

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

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

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

  17. 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!

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

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

  23. Hello Mary Lou,
    I’m playing a bit with your code and it looks delicious. Thanks a lot!

    However, .querySelector() did not work for me, and I had to change all classes in ID and use .getElementById() to get them into variables.

  25. What about old browsers?

    Can you give for us JS or jQuery version of this script, please?

    • To disable scrolling, add the following JS to your footer:

      $('#trigger-overlay').click(function(){ $('html').css('overflow', 'hidden'); }); $('.overlay-close').click(function(){ $('html').css('overflow', 'scroll'); });

  29. Superb innovative ideas when put into paper and coded that results a magnificent looks as you designs ..
    great work .. go ahead !!!!!

  31. Amazing stuff again, Mary Lou!!
    Thank you so much for sharing this.

    If anyone wants to know how to implement ‘closing the overlay on clicking any navigation menu item’ please do the following:
    Simply use toggleOverlay() function.
    For example, by adding the following code in JS:

    $('.your_selector').click(function(){ toggleOverlay(); })

    Obviously, ‘.your_selector’ should be a selector (class) targeting the navigation menu link (anchor tag) on which user clicks to hide overlay. Simple and sweet!

    Tested and working with the first variant (HugeInc. style).
    Should work in other versions also.
    Good luck.

    PS.
    Please share if you find a better alternative, gladness 🙂

    With Love,
    Designova from Kerala

    • Kerala,
      Thanks for the code.
      I know enough javascript to understand what this toggleOverlay () function is doing but I do not know where to insert this…
      In what file do you insert the toggleOverlay () function: classie.js or demo1.js ?
      And where in the code do you insert this Toggle function?

      Also, what would an example of ‘.your_selector’ be?

      Thank you,
      Justin

    • I am not having any luck with this. I created a div class .closeMenu and then have all links as Link & inserted your code at the bottom of the html page as

      $(‘.closeMenu’).click(function(){
      toggleOverlay();
      })

      Could you perhaps provide an example code.

    • Hi Sean,

      Could you please tell me how you got this to work? I tried the same technique for a while without reading these comments, then copied designova’s code. I tried it on the page’s html and I get an undefined function error of toggleOverlay, I tried it inside the demo1.js file too but nothing happens when I click the selector (no console error). Driving me nuts!

      Thanks

    • Above ” triggerBttn.addEventListener( ‘click’, toggleOverlay ); ” at the bottom of the .js file I added:

      $(“#home, #work, #about, #staff, #contact”).click(function(){
      toggleOverlay();
      })

      —–

      Add the id to your links:

      a href=”#home” id=”home”
      a href=”#work” id=”work”
      …and so on.

      Thanks to designnova for the tip.

    • Hi Designova, great work on your website. Ive tried this solution but it just hasnt worked for me at all. I also tried Sean’s solution below but the function then doesnt work at all. Please help with perhaps a used and tested example

  37. Thank you, but what about disable scrolling of body when overlay in open and enable it back when it’s closed ?
    Thank you in advance for help.

  38. tnx for your tutorials, how can use this effect when more than 1 link in page?

  40. Very nice, but i’m trying put more that 1 in my web, and i not get! has a way for doing this?

    • duplicate the “demo1.js” and then change both var’s “triggerBttn” and “overlay”.

    • Use below code and you will get multiple popups in one page

      (function() {
      var triggerBttn = document.getElementById( ‘trigger-overlay2’ ),
      overlay = document.querySelector( ‘div.overlay2’ ),
      closeBttn = overlay.querySelector( ‘button.overlay-close’ );
      transEndEventNames = {
      ‘WebkitTransition’: ‘webkitTransitionEnd’,
      ‘MozTransition’: ‘transitionend’,
      ‘OTransition’: ‘oTransitionEnd’,
      ‘msTransition’: ‘MSTransitionEnd’,
      ‘transition’: ‘transitionend’
      },
      transEndEventName = transEndEventNames[ Modernizr.prefixed( ‘transition’ ) ],
      support = { transitions : Modernizr.csstransitions };

      function toggleOverlay2() {
      if( classie.has( overlay, ‘open’ ) ) {
      classie.remove( overlay, ‘open’ );
      classie.add( overlay, ‘close’ );
      var onEndTransitionFn = function( ev ) {
      if( support.transitions ) {
      if( ev.propertyName !== ‘visibility’ ) return;
      this.removeEventListener( transEndEventName, onEndTransitionFn );
      }
      classie.remove( overlay, ‘close’ );
      };
      if( support.transitions ) {
      overlay.addEventListener( transEndEventName, onEndTransitionFn );
      }
      else {
      onEndTransitionFn();
      }
      }
      else if( !classie.has( overlay, ‘close’ ) ) {
      classie.add( overlay, ‘open’ );
      }
      }
      triggerBttn.addEventListener( ‘click’, toggleOverlay2 );
      closeBttn.addEventListener( ‘click’, toggleOverlay2 );
      })();

      /* Overlay style */
      .overlay, .overlay2, {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(153,204,51,0.9);
      z-index:10 !important;
      }

  44. Hi, i am newbie in web design. May i know how to apply the css into my page ?
    Do i need to import all the download source into my project ?
    I am using visual studio 2013 using C#
    Any help will do. Appreciate.

  46. The javascript from this demo disables when I use this code in conjunction with jQuery Libraries that are needed for other javascript I’m adding to the same page – is there a solution for this?

    • specifically: demo1.js is the file that has the issue.
      I get “TypeError: closeBttn is null”
      It seems that (function($) { won’t allow the javascript to work with jQuery libraries

  47. Hi would it be possible to have more than one overlay per page? Might it just be a case of adjusting the CCS selectors and the CSS? or would I need to edit the JS?

  48. I just want to know how can I make a thumbnail gallery and when I click on each thumbnail, it’ll open the corresponding overlay div. Or, like someone ask, using multiple image buttons in one page to open different overlays.

  49. Dear,

    I love your design but i’m a beginner in writing code 🙂 so can you please explain how i can implement this nice menu design into my website :)?

    Thanks a lot!

    Best regards,
    Lisa

  50. Great work Mary LOU, thanks.
    I put the modal on my website, but i would like put it under my header, but i don’t know why, on safari and chrome on the header, i try to put a z-index on the header and on the overlay, but no result.
    Can someone help me please.
    Thanks in advence