How to Create an Overlay Effect?
FREE
Overview
CSS as we all know is used to make websites look good. It has many tricks up its sleeve that enable us to do so. An overlay is one such thing. Overlay means covering the surface of an element. You must have encountered them when visiting a website. Many websites have a popup with some form, advertisement, etc, these are examples of an overlay.
In this article, you will learn how to create overlays in CSS.
Pre-requisites
To create an overlay in CSS you should have basic knowledge of
- CSS positions
- :hover
That's it. Let's learn how to create CSS overlays.
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
CSS Overlay Syntax
Here is the syntax that will create a CSS overlay.
Let's move to a detailed break down of the syntax in the next section.
Basic Example
For an overlay CSS to work properly we need some JavaScript also. This example will explain to you how HTML, CSS, and JavaScript can be linked together to create an overlay.
The example we will see below illustrates the concept of overlay using a single HTML file that contains both JS and CSS, but we can separate them into different files, and that will also work just fine.
First, let's start with the HTML part:
Output
CSS
In place of position:fixed we can also use position:absolute both will work. With position absolute, we have to specify the top/left/right positions.
JavaScript
These two functions are responsible for showing and hiding the overlay CSS. The function changes the display property of the element.
So after combining HTML, CSS, and JavaScript, your output will look like this:
Output:
How to Create Different Overlay Effects?
Turn Learning into Career Growth
Fade Overlay Effect
In this effect, an overlay is displayed when we hover over the image.
HTML
CSS
Output:
Image Overlay Slide
Four types of sliding effects can be created using a CSS overlay, these are top, bottom, left, and right.
Let's look at them one by one-
Slide in Overlay from Top to Bottom
Here the overlay will appear from the top and will continue to the bottom.
HTML
CSS
Output:
Slide in Overlay from Bottom to Top
Output:
Slide in Overlay from Left to Right
HTML
CSS
Output:
Slide in Overlay from Right to Left
HTML
CSS
Output:
Image Overlay Title
HTML
CSS
Output:
Image Overlay Icon
For icon, we are using Font-Awesome. To make that work we will insert this link tag in the <Head> section of the HTML
HTML
CSS
Output:
Conclusion
Till now you must have learned
- Overlay means covering the surface of an element.
- HTML, CSS, and JavaScript can be linked together to create an overlay.
- The CSS overlay can be triggered by elements when we hover over them or we could also make separate buttons to trigger the overlay.
- We could also display text in the CSS overlay and make them slide as we show in the above examples.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more