Kevin Powell - Community•2y ago

Content overlay on top of footer

Hey guys, this seemingly simple overlay effect has stumped me. I came across this cool overlay effect where the main content is on top of the footer on this website: https://www.eatsleepwork.com/ I copy and pasted the relevant bits I found in their code in codepen and it doesn't work. I'm really confused on what I'm missing here. https://codepen.io/vince1444/pen/oNQzZpa

12 Replies

vinceOP•2y ago

Came across another site that does it too: https://bff.co/ They pretty much follow the same exact approach. Not sure what I'm missing here 😅

Azyrum•2y ago

@vince https://codepen.io/thomasbobs/pen/KGyvMx , hey vince i found this

thomasbobs

CodePen

Fixed Footer Reveal

An experiment involving a fixed footer that reveals from behind the main page content on-scroll. Results in a very pleasing effect that is just a bit d...

vinceOP•2y ago

Thanks! I modified it and it still works I'm so confused what I did wrong compared to this lol I stripped out all the code from that codepen to this:

* {
  margin: 0;
}

html {
  height: 100%;
}

body, main {
  min-height: 100%;
}

main {
  position: relative;
  z-index: 10;
  margin-bottom: 100px;
  background-color: rebeccapurple;
}

p {
  max-width: 60ch;
  color: white;
}

footer {
  background: #333;
  color: #fff;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 0;
}

* {
  margin: 0;
}

html {
  height: 100%;
}

body, main {
  min-height: 100%;
}

main {
  position: relative;
  z-index: 10;
  margin-bottom: 100px;
  background-color: rebeccapurple;
}

p {
  max-width: 60ch;
  color: white;
}

footer {
  background: #333;
  color: #fff;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 0;
}

Which is what I have in my original codepen

Azyrum•2y ago

😂

vinceOP•2y ago

Lol I legitimately think this codepen is bugged somehow

Jochem•2y ago

your background on main is transparent

vinceOP•2y ago

I have it in split screen view and they're both almost the exact same omg.

Jochem•2y ago

I've been looking at this perplexed for 20 minutes, until I saw your main text scroll through the letters on footer

vinceOP•2y ago

I saw that and I guess it just didn't register for me 😂 I've been sitting here for like an hour so confused

Chris Bolson•2y ago

Jochem•2y ago

I thought your footer rule wasn't getting applied properly cause it has color: white, but turns out it's just the background on the main showing the footer regardless

vinceOP•2y ago

Lmao I don't think I would have figured that out anytime soon, thank you so much guys

Gaming

Programming

Content overlay on top of footer