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.

From our sponsor: Guide customers along the path to purchase with our award-winning platform. Starting at $14.99/mo.

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:

Mary Lou

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.


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

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

  2. Hello!

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


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


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

  4. Just in case i use

    $("#menuitem1, #menuitem2, #menuitem3, #menuitem4").click(function () {

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


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

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

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

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

    dont work : |

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

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


  12. 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”.

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

    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

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


  15. 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-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 🙂