PIT Designs Logo

Revealing Footer in Oxygen (CSS Only)

I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.


Posted 3 years ago on May 24th, 2020. Last modified on May 26th, 2020

Related To:

Things to Consider Before Designing a Logo

Every company needs its unique identity, so everybody designs a logo, but what should we take care of while designing a logo? Let's find out.

Tips On How To Be Safe When Using The Internet

We all know the importance of staying safe on the internet. With how much time we spend online these days, […]

How a Rephraser can Help you Improve your Social Media Presence

Having a problem with your social media content? Too much competition to deal with? Worry not! Here is how a Rephraser can help.

How Automation Software Help with Payroll Processing

Automation software greatly reduces payroll processing errors, enhances compliance, increases efficiency, and makes paychecks easier to create and file. Automation […]

How To Stay Safe While Surfing The Internet

The Internet is a part of our everyday life nowadays. Every day we spend a good amount of time on […]

Business Books Entrepreneurs Must Read to Dominate Their Industry

Whether you aspire to start a small business or launched a digital marketing agency, you must spend sufficient time reading […]

The Creative Entrepreneur: Exploring Career Opportunities for Innovators and Problem-Solvers

All entrepreneurs need problem-solving and innovative skills. Finding solutions or creating new possibilities is accomplished through problem-solving. The ability to […]

Top 2D Animation Tools in 2023

Shopping for 2D animation software for your next project? Here are five of the best 2D Animation tools that are worth exploring.

Revealing footer of a website is a nice effect, we used it on our Web design for startups page. The idea is to reveal the footer section as you reach the bottom of the page. Rather than having it static display.

In this tutorial I'll explain how to simply create this effect of revealing Footer in Oxygen builder.

Let's get started, with step by step. Or jump to tl;dr version.

Preparing the Inner Content

Generally a web page consist of Header , Inner Content (where you have all the text, images, etc..) and Footer.

We will mainly work with the last section, before the Footer.

In this example we're using a white backgroud with 200px bottom margin.

So the CSS for the section before the Footer is:

background-color: white; 
margin-bottom: 200px;

The Footer Section

Create the footer section, and apply this CSS code to it.

You can change the height vlaue as you wish.

position: fixed; bottom: 0; z-index: -1; height: 200px;

Final Step

In order for this to work, and the footer in behind all other sections (as we're setting z-index to -1)

You need to make sure all sections have a background, even if it's just plain white, you still have to actually assign a background color.


TL;DR Version:

Step One

Add CSS to the last section (before the footer)
/** change values as suitable **/
background-color: white;
margin-bottom: 200px;

Step Two

Add CSS to the Footer section
/** change height value as suitable **/
position: fixed; bottom: 0; z-index: -1; height: 200px;