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

Ideas for Image Motion Trail Animations

Case Study: Windland — An Immersive Three.js Experience

On-Scroll Animation Ideas for Sticky Sections

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

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 147

Comments are closed.

  1. I having problem to set 2 different effect overlay in a same html page..Could any one help me…

  2. I’m trying to use this as the post loader in my angularjs WordPress theme, is it possible to scroll inside the overlay and stop scroll behind it. I’ve tried increasing the height of the overlay, doesn’t work.

  3. Here is the modified html and demo.js for multiple links and different overlays. The code may be a little messy but just replace the demo.js with the one here and modify your html as below.
    <a data-href="link1" class="trigger-overlay" href="#">Link 1</a> <a data-href="link2" class="trigger-overlay" href="#">Link 2</a> <div id="link1" class="overlay overlay-contentpush"><a class="overlay-close">Close</a><h1>Link1</h1></div> <div id="link2" class="overlay overlay-contentpush"><a class="overlay-close">Close</a><h1>Link1</h1></div>

    (function() { var triggerBttn = document.getElementsByClassName('trigger-overlay'); transEndEventNames = {'WebkitTransition': 'webkitTransitionEnd','MozTransition': 'transitionend','OTransition': 'oTransitionEnd','msTransition': 'MSTransitionEnd','transition': 'transitionend'}, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], support = { transitions : Modernizr.csstransitions }; function toggleOverlay() { var overlay = document.getElementById(this.getAttribute('data-href')); 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' ); } else if( classie.has( overlay, 'close' ) ) { classie.add( overlay, 'open' ); } } for(var i=0; i < triggerBttn.length ; i++){triggerBttn[i].addEventListener( 'click', toggleOverlay );} var closeBttn = document.getElementsByClassName('overlay-close'); for(var i=0; i < closeBttn.length ; i++){ closeBttn[i].addEventListener( 'click' , function () {this.parentNode.className = this.parentNode.className.replace( /(?:^|\s)open(?!\S)/g , '' );} ); } })();

  4. I got issues when I use -webkit-overflow-scrolling: touch; inside the layer and then close it again.
    After this the content becomes unscrollable…
    Does anybody got the same problem?

  5. Works great in all browser widths on desktop, but it’s not opening on iphone. Any suggestions?

  7. Hello,

    I’m a beginner and want to insert the code/files into my wordpress site. Can someone give me advise where to put the files?
    CSS will go into my child theme CSS file and the other files? Where do I have to copy them or can I take the codes and put them into existing files?

    Thanks for your help!!