CSS - Overlay

An overlay is a transparent layer of content that is placed on top of another element. It can be used to create different effects, such as a modal window, a tooltip, or a popover.

The overlay element should be positioned absolutely and have a higher z-index than the content element. This will ensure that the overlay is displayed on top of the content.

Example of Overlay Effect

Here you can see overlay effect when you hover mouse on top of CodesCompiler logo. This types of styling give a dynamic experience for users that are visiting to your webpage.

Table of Contents

How to Create Overlay Effect?

To create an overlay using CSS, follow these steps:

• Create the Container: Use a container element to hold the content you want to overlay. A container can be div element, span element or even an image.

• Set Up the Positioning: Make the container position: relative so that any absolutely positioned elements inside it will be positioned relative to this container.

• Add the Overlay Element: Inside the container, add another element (the overlay) and set position: absolute to ensure it covers the entire container. Also make sure the overlay’s top, left properties are set to 0 and width, height properties are set to 100%, so it fully covers the container.

• Style the Overlay: Set the background color of the overlay using rgba() function to give a semi-transparent effect. And initially, set the opacity of the overlay to 0 to make it invisible by default.

• Add Hover Effect: Use hover pseudo-class to the overlay container to change the overlay’s opacity from 0 to 1 when user moves mouse over container.

CSS Overlay Basic Example

The following example shows how to create a simple overlay effect in CSS using above steps.

Example

Overlay Effect Using JavaScript

The following example uses javascript to create an overlay effect that appears when you click a button and disappears when you click anywhere on the page.

JavaScript can be used to show and hide the overlay div element by using the ‘querySelector()’ method to get the overlay element. When the button is clicked, a function is executed that toggles the display property of the overlay container between block (visible) and none (hidden).

Example

CSS Overlay Top to Bottom Sliding

The following example shows an image with an overlay that slides down from the top of the image to the bottom when the user hovers over it

Example

CSS Overlay Bottom to Top Sliding

The following example shows an image with an overlay effect that slides up from the bottom of the image to the top when the user hovers over it

Example

CSS Overlay Left to Right Sliding

The following example shows an image with an overlay effect that slides from left to right when you hover over it

Example

CSS Overlay Right to Left Sliding

The following example shows an image with an overlay effect that slides from right to left when you hover over it

CSS Overlay Fade Effect

The following example shows how to create an overlay that appears on top of an image when the user hovers over it

Example

CSS Overlay Image Title

Here is an example of an overlay that displays the title of an image when the user hovers over it

CSS Image Icon Overlay

Here is an example of an overlay that displays the icons over an image when the user hovers over it

Example