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.

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!

Tagged with:

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.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 147

Comments are closed.
  1. Hi Awesome work

    I was wondering If is possible to have more than one button on the same page. ???

    Thanks !!

  2. I was curious. I see that Jaclyn has already raised the issue once of the close functionality not being able to work due to other JS libraries. How would I go about resolving this?

  3. I was wondering if it was possible to do without using a button, but perhaps an image as a hyper link?

  4. I’m wanting to go to different section of in a same page from navigation option. I’ve attempt to add more button but it won’t toggle. Do you know how I can do it? This is what a currently did;

    triggerBttn.addEventListener( ‘click’, toggleOverlay );
    closeBttn.addEventListener( ‘click’, toggleOverlay );
    portfolioBttn.addEventListener( ‘click’, toggleOverlay );
    homeBttn.addEventListener( ‘click’, toggleOverlay );

    the first 2 default one is working, but not the additional ones I’ve edited.Thanks very much, I love all your tutorials! 🙂

  5. I am turning these into pop up portfolio pages. So I am linking my images to activate the pop up. But for some reason it only works on one image.

    The code I have is exactly the same for the other 2. Not sure why this is happening. Its seems like the js is only triggering one pop up.

    ANY IDEAS??

    • you are probably using same ID for both it wont work like that, few ppl asked for multiple just attach a new ID to it and in the script change it to those ids that should work.

  6. how to implement this with scrolling? if your content is longer than your height

  7. Thought I would explain in more detail how to have multiple toggle buttons on one page since a lot of people we’re/are asking about it. An ID can only be used one time on a web page, so once you use the #trigger-overlay ID on your first button, that’s it. You need to add another one to the JS file you’re using. I’ll use demo1.js as an example.

    You need to add another ID for your second button to trigger the same menu. First, we add a new variable right under the first one in demo1.js on line 3:

    var triggerBttn = document.getElementById( ‘trigger-overlay’ ),
    triggerBttnTwo = document.getElementById( ‘trigger-overlay-two’ ),

    Then we need to add an Event Listener for the new ID so that it knows to trigger it as well. We also add this right after the EventListener for the first one in the demo1.js on line 40:

    triggerBttn.addEventListener( ‘click’, toggleOverlay );
    triggerBttnTwo.addEventListener( ‘click’, toggleOverlay );

    That’s it! Now just use the ID #trigger-overlay-two in your second button and it will trigger the same panel nav on the same page. Repeat the process to add more button triggers with unique ID’s.

  8. I updated this for my linkings and added the close after clicking a <a href=”” rel=”nofollow”> of the menu, and its done.

    Awesome work ML, keep it up

    Thanks for sharing

  9. Hi Mary Lou,

    First of all thank you very much for this great tutorial, well explained and easy to use 😉

    I was wondering, if it’s possible, to close the overlay, after clicking a menu item. I tried to manage it by using the following code:

    $(document).click(function(){ $('#trigger-overlay:visible .close').click(); });

    (found on stackoverflow.com) but it won’t work.

    Can you give me an input? Thank you very much and cheers from Zurich.

    • Hi Luca !

      i need to do the same trick as you ! After clicking a menu item, i need that the overlay to close while my page is scrolling to the right anchor… In fact, i click on the item then, my page scrolls. But i don’t see it cause the overlay is still displayed. How did you made it ?

      Thank U !

      Aurélien › France

  10. Ups… First I didn’t understand the explanation of Jesse, after a second reading it was really clear 😉 Now my overlay menu close, after choosing a menu item. Thanks a lot 😀

  11. Hello!

    How can i do to open the overlay automatically without pressing the button “Open overlay” ?

    Thanks!

  12. Did anybody tried to implement more than one overlays on the same page with trigger by different buttons? I tried playing around with it and hasn’t got a clue :(.

    • Did you solved your problem ? I have the same one and I can’t find any solution. I’ve tried to had that :

      triggerBttn = document.getElementById( ‘trigger-overlay’, ‘trigger-overlay2’ ),
      overlay = document.querySelector( ‘div.overlay’, ‘div.overlay2’ ),

      but I guess i’ve missed something.
      If anybody can help me ! 🙂

    • Hi, I had the same issue and I resolved it by creating multiple CSS classes and JS files for it. All I did was replace the “hugeinc” in the copied JS and CSS as well as the html for each new button respectively.

      Hope this helps.

      Cheers.

    • Aynka,

      Thank you very much! I wanted to quit the idea to use two diffrent styles on one page but I said to myself “let’s try one more time, I should read comments” and there you are 🙂

      Ofcourse, Mary Lou, another great tut! You are the best 🙂

  13. Just in case i use
    $("#menuitem1, #menuitem2, #menuitem3, #menuitem4").click(function () { $(".overlay-close").click(); });

  14. Hey there,

    How do you make the content overlay taller? (The green area containing the nav items)
    I am trying to customize the content push affect, 7.html

    Thanks!!

  15. I am attempting to place multiple of these on a single page, using them as page overlays in a menu. Each one will have content and not navigation. I cannot get them to work side by side. Any advice? Thanks!

  16. YO!
    This is finamenalny and mega modern effect… Maintain the plug and release new updates for its ongoing work.

  17. Hi there,
    I’m trying this, working out great. however. I come to face an issue that my website is one page long. how do i trigger whatever i click on one of the link in there, its close n go to the url within that page? ..thanks

  18. how play multi???
    triggerBttn = document.getElementById( ‘trigger-overlay’, ‘trigger-overlay2? ),
    overlay = document.querySelector( ‘div.overlay’, ‘div.overlay2? ),

    dont work : |

  19. Thanks for this, works great! Have one question/issue…

    How can I use it without the classie.js file? It is conflicting with another plugin I’m using and they both won’t play nice together yet.

    Thanks for the help!
    Danny

  20. Great tutorial and effects- thank you!

    One question/issue though… how can I use it without the need for the classie.js file? I’m using another plugin and they are conflicting. Any help would be greatly appreciated.

    Thanks!
    Danny

  21. Hi, anyone managed to make the overlay close on menu close? Ive tried some of the solutions 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. Many thanks, will pay for working solution for “close on menu click”.

  22. I have read all the comments and have seen several people address how to close the overlay once you click the link. I have a one page site and need it to close and then scroll to that particular page. Now it scrolls to that particular section once I click the link, but it does not close. It simply scrolls to that section behind the overlay menu. For the love of anyones almighty can someone address this with a step by step process for dummys like me.

    Now I have this code.
    $(‘.close’).click(function(){
    toggleOverlay();
    });

    but what do I do with it?

    Ive put it above this like Jesse said in the messages

    triggerBttn.addEventListener( ‘click’, toggleOverlay );
    closeBttn.addEventListener( ‘click’, toggleOverlay );
    })();

    does not work.

    PS. Im using demo 7

  23. Hello,

    How do i change at the Content push effect the direction of the layer?
    I want the 2nd layer to come from down to top instead left to right.

    thanks

  24. Hi to everyone,

    to make overlay close after cliking item menu, in JS:
    (function() { var triggerBttn = document.getElementById( 'trigger-overlay' ), overlay = document.querySelector( 'div.overlay' ), homeBttn = overlay.querySelector( 'button.overlay-home' ); aboutBttn = overlay.querySelector( 'button.overlay-home2' ); traiteurBttn = overlay.querySelector( 'button.overlay-home3' ); snackBttn = overlay.querySelector( 'button.overlay-home4' ); contactBttn = overlay.querySelector( 'button.overlay-home5' ); closeBttn = overlay.querySelector( 'button.overlay-close' ); transEndEventNames = {.........

    and at the bottom:

    homeBttn.addEventListener( 'click', toggleOverlay ); aboutBttn.addEventListener( 'click', toggleOverlay ); traiteurBttn.addEventListener( 'click', toggleOverlay ); snackBttn.addEventListener( 'click', toggleOverlay ); contactBttn.addEventListener( 'click', toggleOverlay ); triggerBttn.addEventListener( 'click', toggleOverlay ); closeBttn.addEventListener( 'click', toggleOverlay );

    in the HTML file the links should be like this:
    <li><a href="#home"><button type="button" class="overlay-home">Home</button></a></li>

    Obviously, rename the class name for each link (overlay-home2, overlay-home3…)

    Redefine style as you want:
    .overlay-home, .overlay-home2, .overlay-home3, .overlay-home4, .overlay-home5 { border: none; outline: none; background: none repeat scroll 0% 0% transparent; font-size: 30; font-family: Arial; }

    Hope it can help.

    • Thank you so much, i read this about 10 times then got it in my head and implemented it and it works, great 🙂

  25. Hi,
    anyone know how to make items appearance change (underline, blur or … whatever) of the current page?

    Many thanks.

  26. This is awesome and works great. However, my nav is a bit long and can get cutoff if it’s a smaller viewport. Is there any tweak to allow for scrolling if need be? When i use my scrollbar, it’s just scrolling the site behind the overlay.

    Thanks!

  27. Here is how I managed to have more than one buttons/overlays per page:

    function fullScreenOverlay() { var overlayQty = document.querySelectorAll('div.overlay').length; for (i = 1; i <= overlayQty; i++) { (function() { var container = document.getElementById( 'main-container' ), triggerBttn = document.getElementById( 'trigger-overlay' + i ), overlay = document.querySelector( '.overlay'+ i ), closeBttn = overlay.querySelector( '.overlay-close' ); transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], support = { transitions : Modernizr.csstransitions }; function toggleOverlay() { if( classie.has( overlay, 'open' ) ) { classie.remove( overlay, 'open' ); classie.remove( container, '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' ); classie.add( container, 'overlay-open' ); } } triggerBttn.addEventListener( 'click', toggleOverlay ); closeBttn.addEventListener( 'click', toggleOverlay ); })(); } }

    • Hey great, I’m looking for a solution like this but it doesn’t work. Can you tell me which Code I have to replace or what do I have to do with my HTM/CSS tags? Sorry but JS is totally new for me.

    • Great, that is what I was looking for. Unfortunately, I do not get it to work. Can you tell me what I have to change in the html or css code? Am a total newbie in js.

    • Hello Jose,

      i have tried using your example code, however it does not seem to work. I have adjusted the names of the id’s in the html page to match trigger-overlay1, trigger-overlay2 etc. and when i test it in the debugger or the console it does not show any errors either.
      Do you happen to have a link to a working example with your code so i can compare and have a look?

      Many thanks

  28. Hi,

    for Miha and those who want to disable scroll when it’s visible, here’s my way, simple but pretty efficient:
    $.fn.fullpage.setKeyboardScrolling(false); $.fn.fullpage.setAllowScrolling(false); $.fn.fullpage.setMouseWheelScrolling(false);
    and
    $.fn.fullpage.setKeyboardScrolling(false); $.fn.fullpage.setAllowScrolling(false); $.fn.fullpage.setMouseWheelScrolling(false);

    ... function toggleOverlay() { if( classie.has( overlay, 'open' ) ) { $.fn.fullpage.setKeyboardScrolling(true); $.fn.fullpage.setAllowScrolling(true); $.fn.fullpage.setMouseWheelScrolling(true); classie.remove( overlay, 'open' ); ...

    ... else if( !classie.has( overlay, 'close' ) ) { $.fn.fullpage.setKeyboardScrolling(false); $.fn.fullpage.setAllowScrolling(false); $.fn.fullpage.setMouseWheelScrolling(false); classie.add( overlay, 'open' ); ...

    I think it could help 😉

  29. In case there still someone figure out how to make an overlay works with multiple button. Here is my code:
    var triggerBttn = document.querySelectorAll( '.trigger-overlay' ); var overlay = document.querySelector( 'div.overlay' ), closeBttn = overlay.querySelector( 'a.overlay-close' ); transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], support = { transitions : Modernizr.csstransitions }; function toggleOverlay() { 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' ); } } var i; for (i = 0; i < triggerBttn.length; i++) { triggerBttn[i].addEventListener( 'click', toggleOverlay ); } closeBttn.addEventListener( 'click', toggleOverlay );

  30. Hello!

    Has anyone had any issues where their needs to be content being position:relative or position:absolute on their page. When I set my content with these styles it will show up when the overlay is active. Is there a quick fix for this? There must be a way to keep that content hidden when overlay is showing.

    Any advice would be appreciated

    Thanks. M

  31. I’ve been trying to adapt this to use with my WordPress portfolio. Obviously this will require opening numerous instances of the window from different links in my grid. I’ve tried replacing the demo1.js code with the examples given above but nothing pops up at all when I do that. Help? Pretty please? I’m soooooo close!

  32. Trying to figure out how to make this work in mobile browsers. Clicking the button does nothing on my iPhone 6+.

    Also, I understand the different posts for creating different ids. But I’m trying to implement this for a WordPress portfolio. How can I do this dynamically?

  33. This is really great! I’m having one problem and I haven’t seen any solutions in the comment section yet. When you hit the back arrow on Safari and Firefox browsers it returns the user to the opened overlay menu. I would like it to close once a user hits clicks their desired navigation link. On Chrome that overlay is removed and it works perfectly. Does anybody know how I might remedy this? Thanks for any help.

    • Hello, I’m having this same problem on my iPhone 6 in both Safari and Chrome. Did anyone work out a solution to this?

      Thanks

  34. Hello,
    I am trying to disable page scroll when overlay is visible. I tried the code suggested by dybo (comment #10) but it does not work. I put a wrapper div on my content and add/remove class to it when menu is opened/closed. It works except every time the menu button is clicked the page goes to the top. Any ideas how to fix that.

    <b>CSS</b> .noscroll { overflow:auto; height:100%; } <b>JS</b> function toggleOverlay() { if( classie.has( overlay, 'open' ) ) { classie.remove( overlay, 'open' ); classie.add( overlay, 'close' ); $('#wrapper').removeClass( 'noscroll' ); var onEndTransitionFn = function( ev ) { classie.remove( overlay, 'close' ); }; path.animate( { 'path' : pathConfig.from }, 400, mina.linear, onEndTransitionFn ); } else if( !classie.has( overlay, 'close' ) ) { classie.add( overlay, 'open' ); $('#wrapper').addClass( 'noscroll' ); path.animate( { 'path' : pathConfig.to }, 400, mina.linear ); } } <b>HTML</b> <div class="menubtn"> ... here goes my menu button </div> <div class="overlay overlay-cornershape" data-path-to="m 0,0 1439.999975,0 0,805.99999 -1439.999975,0 z"> ... the overlay code from the example </div> <div id="wrapper"> ... some scrollable content </div>

  35. Any ideas how to disable scroll on the background when menu is opened? The suggested code from dybo (comment #10 on this page) seems to not work.

    • @Ivan, Hi you can change your body overflow value by adding the $(‘body”… like this :

      if( classie.has( overlay, 'open' ) ) { $("body").css({ overflow: 'visible' }) classie.remove( overlay, 'open' ); classie.add( overlay, 'close' );
      else if( !classie.has( overlay, 'close' ) ) { $("body").css({ overflow: 'hidden' }); classie.add( overlay, 'open' );

      It should work as it’s work on my side 🙂

    • Oli,
      It really works but not for me. I utilize Smooth Scroll solution to handle parallax effect in Chrome, Safari and IE. Seems both codes interfere somehow. If I remove the SmoothScroll – yes it works. Otherwise – not!
      Anyway, thank you for the code example!

    • add the following to stop scrolling of parent window:

      $(document.body).addClass(“no-scroll”);

      then add this to your css:

      .no-scroll {
      overflow: hidden;
      }
      Finally, to remove the class from body when “close” is clicked, add the following (this can be changed for links within window, etc…

      $(“.overlay .overlay-close”).click(function () {
      $(document.body).removeClass(“no-scroll”);
      });

  36. Hi,
    Very nice work.
    Unfortunately it does not work on Samsung browser with android 4.3.

  37. Hi,

    Amazing plugin, but really struggling with the close on click stuff. I, like others, want the menu to close when a menu item is clicked, makes total sense really.

    I’m not a massive java programmer so please in any answer place the full script and not assume i know a) where it goes, b) the main tags if different etc !

    Thanks and can’t wait to roll this out.

  38. i’m not very experienced with javascript, but here’s how i made the links close the overlay:

    since the navigation is a list, i gave my navigation an id “nav” and added the following lines of code to the “demo.js” file:

    add this above line 4:
    list = overlay.querySelector("nav").getElementsByTagName("li"),

    and this below the line closeBttn.addEventListener( ‘click’, toggleOverlay ); line:

    for (i = 0, len = list.length; i < len; i++){ list[i].addEventListener( 'click', toggleOverlay ); }

  39. Hi,

    I’m working on my website and I have put the code in a undescores.me wordpress theme, in the header.php file. It seems to work because I have the overlay with the menu elements on it when I ‘m on the site home page, but there is no way to close the overlay. Nothing happen when I click on the close button.
    I use the demo1.js. When I try to put it directly in my header.php the Firefox’s console says :

    “ReferenceError: Modernizr is not defined
    transEndEventName = transEndEventNames[ Modernizr.prefixed( ‘transition’ ) ], ”

    Can someone help me please ?

    Cheers.