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 1 year 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:

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 Optimize Marketing Content to Get Hits Among International Customers

Whether you operate as a small business or an international company, reaching out to potential customers worldwide is always a […]

How Mobile Apps Can Help In Optimizing Business Growth

With the increase in the use of smartphones all around the world, businesses nowadays are finding new ways to connect […]

10 Greatest Challenges the Virtual Teams are Facing Now

The advance of technology has made it easy to work with different teams across different geographic locations. A ship manufacturer […]

Emerging Trends & Technologies in the Automobile Sector

The automotive industry is changing substantially as the time passes and the technological innovations are the reason behind this change. […]

5 Famous Entrepreneurs & Their Way to Success

 In business, if you want to reap success, it’s important to look at past stories of successful entrepreneurs. This article […]

5 Effective Customer Engagement Strategies

Do you know that customers are the lifeblood of business? And without them, a business cannot survive?  According to a […]

Extract Data From Any Website with RTILA

Some websites can contain a very large amount of data, such as companies contacts, product details and prices, images, stats, […]

Leave a Reply

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

menu-circlecross-circle