One of the best ways to add more dimension and drama to your design and development process is to overlap elements.

In this video I'm going to focus primarily on section overlaps (where you want content to overlap the section above it or below it). Or, at least, to appear to overlap it.

Certain techniques are better than others depending on the use case, so it's important for you to know as many overlap techniques as possible. The more tricks you have in your bag, the more situations you can handle.

The 7 Techniques

  1. Inner Box Shadow
  2. Background Gradient
  3. Section::Before
  4. Wrapper::After
  5. SVG Shape Divider
  6. Negative Margin
  7. Translate-Y