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 2 years ago on May 24th, 2020. Last modified on May 26th, 2020

Related To:


pCloud Lifetime Up to 35% OFF AliDropship Plugin

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;

Do we all agree that Coffee is the fuel that feeds the free content creating?
Why Does My Mac Keep Saying, Disk Full?

Is your Mac keep saying, Disk Full? Here is how you can clean junk files on Mac and optimize your computer manually or with the best Mac Uninstaller

5 Commonly used materials for sticker printing

commonly used materials for sticker printing, ideal uses. Exactly what to look out for and can get your perfect custom sticker in record time

How to Effectively Optimize Your Ecommerce Website for Voice Search

This article offers tips on how to optimize your ecommerce website for voice searches. It covers the importance of keyword research, optimizing your product page, and more.

The Most Expensive House in Dubai

The most expensive home in Dubai, located in one of the most exclusive neighborhoods. It has all the amenities you would expect from a luxury property

Top Premium Stock Images Websites

Find our where you can find premium stock images, in high definition for your blog posts, website designs, or social media

How to Build an Engaging UI-UX Design Website

Do you know that your website speaks on your behalf? Well, this is one of the most powerful marketing tools […]

3 Common Types of WordPress Attacks and Mitigation Steps

Have you ever wondered why WordPress (WP) is a primary target for attacks? Well, news has it that WordPress powers […]