Discover the best overlapping websites created by professional designers. Get inspired and start planning your perfect overlapping web design today!

Webflow

Make the most of grid overlap for more creative layouts.

Overlapping grid

Swiper Overlapping Cards

I created this effect to help someone out on the Webflow Discord, and I thought I'd make it cloneable in case anyone else wants to use it! I also decided to spice it up a little with some lovely animations from Lottieflow :)

The basic effect is achieved just by setting the header as fixed at a lower z-index than the (relative positioned) content below.

Overlapped Header Effect

View Resource at https://www.timothyricks.com/resources/unmask-sections-while-scrolling

Sticky Overlap

Unmask Sections While Scrolling in Webflow

Based on https://kirschberg.co.nz/

Transition Tutorial: https://www.youtube.com/watch?v=fBU4mLX45HU

AJAX Tutorial: https://www.patreon.com/posts/57982049

Overlapping Page Transition

A new logo, new image and new website for our little web design service. We went through several iterations for this finalized design. We came across a few obstacles along the way during the design and development process which resulting in removing a lot of ideas implemented. The major issue with the fallback is performance drop caused by complex interactions, hidden heavy content elements, overlapping bugs, etc.

Eventhough the end result is not as expected, but it came out fine. (Well, at least it works.) Also, along the process, we discovered several bugs, do's and dont's, the possibilities, and new ideas. It has been fun creating this site.

If anyone has feedback or inquiry, feel free to drop me a message. =)

Lastly, have fun building websites.

SketchzLab

SketchzLab Official Site - Renewal

Webflow University

Span manually-positioned content to overlap, and set the overlap order while keeping the layout accessible.

Open or clone this project and interact with the grid layout. Check out the video lesson here: https://wfl.io/2JvKZ8i

Modern Bakery Times

Overlapping content in a news grid

Pretty Nice Websites

div blocks that fly in and overlap on scroll. Any practical uses for this? Doubtful. Is it cool? Sort of, I guess

Scrolling Overlapping Div Blocks

scrolling-overlapping-div-blocks

A service to help professionals polish their resumé and get the job.

A colourful, intricate design that leverages Webflow's CSS grid and flex boxes in a unique overlapping design.