PIT Designs Logo

Revealing Footer in Oxygen (CSS Only)

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


Posted 4 months ago on May 24th, 2020. Last modified on May 26th, 2020

Related To:


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:

How to create revealing footer in Oxygen builder (short 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;

0/5 (0 Reviews)
Do we all agree that Coffee is the fuel that feeds the free content creating?
How to Choose Professional Fonts for Web Design

Fortunately, the days when fonts and colors were chosen at random have long passed. Now each element of the site […]

How to Write Design Brief for Web Design Projects

Got a big web design project coming up? Then you'll need a great design brief for web design, to carry […]

Adobe CC Updates Focused on Collaboration & Remote Work

Adobe's June updates to its Creative Cloud suite comes with changes directly aimed at making collaboration and remote-work better and […]

6 Ways Erbil International Hotel Complies with COVID-19 Safety

Erbil International Hotel, have activated the "Health and Safety program" which ensures customers, from the moment they enter the property until leaving.

Starting Online Business in Iraq

As part of our business launching & partnership programs. We help you kick start your project online, and start making […]

Drawing Anatomy & Art: A Place for Artistic Freedom

Art, in its broadest sense, is a form of communication. It's been known and shown throughout history how mankind used […]

How to Choose Commercial Cleaning in Erbil

How to find the right company for commercial cleaning in Erbil - Iraq? With the current global pandemic situation, work […]

Leave a Reply

Your email address will not be published. Required fields are marked *

chevron-downmenu-circlecross-circle