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

Webflow

Make the most of grid overlap for more creative layouts.

Overlapping grid

Designflow agency

This is our 2nd cloneable design! 🎉🚀 Use it for free and do whatever you want with it. 

Check it out: https://overlay-images-navigation.webflow.io/.
Overlay images animations can be a simple way to enhance your site experience through delightful interactions.

This template is made with: 
✔️ CMS Images 

Follow me for more Webflow freebies in the future 💙

Overlay Images Navigation

Overlay Images Navigation — Cloneable # 2

Small experiment. Transforming a trend in mockup design into a new website canvas. The micro-animated environmental shadow overlay.

Please like if you clone (and like it).

Shadow Stage Demo

Once the popup is open, scrolling of the entire page is disabled using custom code (body = overflow hidden). This helps longer content in the popup overlay to scroll more comfortably without accidentally scrolling the whole page. For the video popup, additional custom jQuery code is needed to stop the video from running in the background when the close button is clicked.

Tutorial: https://youtu.be/JbNtDkrfH0U

Custom Content and Video Popup / Modal

This is our 4th cloneable design! 🎉🚀 Use it for free and do whatever you want with it. 

Check it out: https://project-page-concept.webflow.io/. 
Overlay images animations can be a simple way to enhance your site experience through delightful interactions.

This template is made with: 
✔️ CMS Images 

Follow me for more Webflow freebies in the future 💙

Project Page Concept

Project Page Concept — Cloneable # 4

You can now change the colour of text on an SVG overlay

Steps
1. Take a div block and add a background colour.
2. Add SVG to the div block as a background image.
3. Add Text element in the div
4. Apply the same colour to text as div block's
5. Copy and paste the CSS code and change the class in code to the text's class.
6. click the publish button

Boom code applied. ENJOY!

Mix Blend Mode

Memberstack

MemberStack freebie #6! 

Use this just-in-time pricing table to upsell your products or services when a user clicks on a premium feature or wants to see your pricing.

The site is mobile friendly, user-friendly, and designer-friendly. I hope it comes in handy on a future project!

MemberStack is not required to use this project. 

If you need any help, you can reach us via the chat on MemberStack.io or our email team@memberstack.io.

#6 - Premium Pricing / Upgrade Modal

#6 - Pricing Modal | Upgrade Modal

MemberStack is a designer-friendly membership platform that works with Webflow. 

------------ 

Modals are an excellent way to help your users feel in control. Let them create an account or log in to an existing account without ever having to leave the page. 

------------ 

To get started - create a free MemberStack account, and add the URL of your new site during setup.

#10 - Login and Signup IX

#10 - Login and Signup Modals

A simple one-pager with a grid of teasers and full nodes as hidden panels. Both the page and the panels are scrollable vertically. There is still an issue with double elevators that I wish I could resolve.

There are two things to consider when reviewing this work:

1/ The teaser + panel is one element with one reusable interaction. It means you can duplicate it and it will continue to work without interferences. That was not easy to do. That's why the clising button is outside of the element and works for every element.

2/ Check the Dashboard page: as the full node panels are hidden, it can be tedious to edit. So the content of the panels sits in a div that is transformed to a Symbol. This page hosts all the symbols so the edition of the pages is way easier. There are many occasions where you can use Symbols for difficult to access content, so you can create a dashboard page for it.

Clone it, make it better! Check in the comments about how to licence the images for yourself.

People Wish - Layout

People Wish - A layout with Webflow

CMS overlay on click (technical prototype)

yep, its responsive ;)

As you can see, every CMS item has a different grid-size. I achieved this with very little custom CSS code. The code is implemented inside the body at the very bottom. If you want every item to be the same size, just delete the custom code. Thats it.

Keep in mind that links inside the overlay won't work. As soon as you click anywhere in the overlay it will close itself instead of triggering the link.
If someone figures out how to achieve this, feel free to write it down in the comments and I will implement it in the project.

Navigationen & Animationen

CMS Grid Overlay

This is our 5th cloneable design! 🎉🚀 Use it for free and do whatever you want with it. 

Check it out: https://animated-cursor-1.webflow.io/. 
Cursor animations can be a simple way to enhance your site experience through delightful interactions.

This template is made with: 
✔️ Monument expanded Font  

Follow me for more Webflow freebies in the future 💙

Animated cursor

Animated Cursor — Cloneable # 5

Flowcraft

CTA Overlay Form

Overlay Form Call to Action

Overlay nav interaction

overlay-navigation-interaction-1

Here is another overlay and overlap Design for the Webflow Community. Now I was focus on the desktop version.

Video Production

video-production-4e8cd1

Formatically is a free, automatic MLA formatting tool for students.

For full functionality visit www.Formatically.com. We are using Django to collect, create, and deliver word documents to students.

My best friend and I were in high school when we had the first version of this site built for us. We had no idea what javascript or UX design were at the time!
Now, 4 years later we were able to build it from the ground up using Webflow!

Formatically 2017

Formatically.com

Halftone Digital

Working Webflow file from our Custom Mobile Navigation tutorial. Learn to build custom navigation in Webflow that features disabling scrolling on full-screen mobile navs, animating the hamburger menu, and more.

Watch the full tutorial here: https://youtu.be/wJT21XwNhWU

PAUL MOBILE NAV

paul-mobile-nav

This can be used with the Webflow CMS, even with the cutaway text!

012 CMS Content

012 - Blog/News ITem

Happy Thursday! Back with another membership freebie.

This one is a cancellation insights form that receives user data from Memberstack. Instead of allowing users to cancel their accounts via the default profile UI, we've created our own 100% in Webflow. All of the form data is submitted directly to Webflow, meaning we can export and analyze the results at any point. 

The cancellation form is currently in a modal, but that could easily be its own separate page. I hope this works well for you! If you have any questions, please leave a comment or contact me directly. duncan@memberstack.com

(Inspired by Baremetrics).