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?
4 Solutions for Alternative Investment Firms

Alternative investments have increasingly become accessible to investors. Therefore, knowing about them is essential for industry professionals and investors. It […]

Promote Your Way to Profits in 5 Ways

Are you operating a business that seems like it's stuck in the summer doldrums? If earnings, sales, and profits aren't […]

Modern & Effective Strategies to Boost Your Business

There are multiple operations in a business that you have to check out thoroughly for the smooth running of a […]

Why Is HTTPS Important and How to Add It Easily for Free to Your Website?

In August 2014, Google created ripples in the webmaster community by stating that its algorithms would henceforth treat HTTPS as […]

How to Get the Best Legal Translation Help in Business

Different people around the world understand only their native language. It would become difficult for them to communicate with people […]

Using SalesBlink To Automate Cold Outreach

SalesBlink is an all-in-one cold outreach platform. But this isn't just another tool for email marketing. SalesBlink helps you automate […]

Common Branding Mistakes You Have To Avoid And How To Do Deal With Them

There are things which you need to avoid to make sure that your brand will become strongly competitive. Hire one of the top branding agencies to avoid branding failures. Continue to read for more details

Leave a Reply

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

menu-circlecross-circle