CSS Overlays

What are Overlays?

An overlay is a transparent layer of content placed on top of another element. It can be used to create different effects, such as modals, tooltips, or floating windows.

Overlay elements should use absolute positioning and have a higher z-index than the content element. This ensures that the overlay appears above the content.

CSS Overlay

Follow these steps to create an overlay using CSS:

Create two

elements, one for the overlay itself and one for the content you want to overlay.

Absolutely position the overlay element at the top of the page.
Set the width and height of the overlay element to 100% so it covers the entire page.
Set the background color of the overlay element to a transparent color, such as rgba(0, 0, 0, 0.5). This will make the overlay visible.
Set the z-index of the overlay element to a higher z-index than any other element on the page. This will ensure the overlay always appears on top of all other elements.

Example

The following example shows an overlay effect that appears when a button is clicked and disappears when any location on the page is clicked.

You can use JavaScript to show and hide the overlay by using the querySelector() method to retrieve the overlay element.

The element When the button is clicked, executes a function that toggles the overlay container’s display property between block (visible) and none (hidden).

Here is an example−

<html> 
<head> 
<style> 
.overlay-container { 
position: fixed; 
display: none; 
width: 100%; 
height: 100%; 
text-align: center; 
background-color: rgba(213, 86, 207, 0.3); 
z-index: 999; 
cursor: pointer; 
} .overlay-content { 
padding: 20px; 
} 
.overlay-button { 
background-color: #38dc29; 
color: white; 
border: none; 
padding: 20px; 
cursor: pointer; 
font-size: 20px; 
text-align: center; 
display: block; 
margin: 50px auto; 
} 
</style> 
</head> 
<body> 
<div class="overlay-container" onclick="overlayFun()"> 
<h1>Tutrialspoint CSS Overlay</h1> 
</div> 
<div style="padding:20px"> 
<button class="overlay-button" onclick="overlayFun()">Click on Button</button> 
</div> 
<script> 
let overlayVisible = false; 
function overlayFun() { 
const overlay = document.querySelector(".overlay-container"); 
overlay.style.display = overlayVisible ? "none" : "block"; 
overlayVisible = !overlayVisible; 
} 
</script> 
</body> 
</
<p>There are four different ways to create a sliding overlay effect: top, bottom, left, and right. We'll discuss each type in turn, along with examples. </p>
<h3>Sliding Overlay from Top to Bottom</h3>
<p>The following example shows an image with an overlay that slides from the top to the bottom when the user hovers over it. </p> 
<pre data-language="HTML"><code class="language-markup line-numbers"><html> 
<head> 
<style> 
.overlay-container img { 
width: 200px; 
height: 200px; 
margin-left: 40%; 
} 
.overlay-container { 
position: relative; 
width: 25%; 
height: auto; 
} 
.overlay-container:hover .top-bottom { 
opacity: 1; 
height: 200px; 
} 
.top-bottom{ 
position: absolute; 
transition: 0.9s ease; 
opacity: 0.3; 
width: 200px; 
border-radius: 5px; 
height: 0; 
top: 0; left: 40%; 
background-color: #d346e6; 
text-align: center; 
color: #ffffff; 
} 
h2 { 
text-align: center; 
} 
</style> 
</head> 
<body> 
<h2>To see the effect, hover your cursor over the image. </h2> 
<div class="overlay-container"> 
<img src= "https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png"> 
<div class="top-bottom"> 
<h2>Top to Bottom Image Overlay</h2> 
</div> 
</div> 
</body> 
</html>

Sliding Overlay from Bottom to Top

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

<html> 
<head> 
<style> 
.overlay-container img { 
width: 200px; 
height: 200px; 
margin-left: 250px; 
} 
.overlay-container { 
position: relative; 
width: 25%; 
height: auto; 
} 
.overlay-container:hover .bottom-top { 
opacity: 1; 
height: 200px; 
} 
.bottom-top { 
position: absolute; 
transition: 0.9s ease; 
opacity: 0.3; 
width: 200px; 
border-radius: 5px; 
height: 0; 
bottom: 0; 
left: 250px; 
background-color: #d346e6; 
text-align: center; 
color: #ffffff; 
} 
h2 { 
text-align: center; 
} 
</style> 
</head> 
<body> 
<h2>To see the effect, hover your cursor over the image. </h2> 
<div class="overlay-container"> 
<img src= "https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png"> 
<div class="bottom-top"> 
<h2>Bottom to Top Image Overlay</h2> 
</div> 
</div> 
</body> 
</html>

Sliding Overlay from Left to Right

The following example demonstrates an image effect where the overlay slides from left to right when you hover your mouse over the image.

<html> 
<head> 
<style> 
.overlay-container img { 
width: 200px; 
height: 200px; 
margin-left: 250px; 
} 
.overlay-container { 
position: relative; 
width: 25%; 
height: auto; 
} 
.overlay-container:hover .left-right { 
opacity: 1; 
width: 200px; 
} 
.left-right { 
position: absolute; 
transition: 0.9s ease; 
opacity: 0.3; 
width: 0; 
border-radius: 5px; 
height: 200px; 
top: 0; 
left: 0; 
margin-left: 250px; 
background-color: #d346e6; 
text-align: center; 
color: #ffffff; 
} 
h2 { 
text-align: center; 
} 
</style> 
</head> 
<body> 
<h2>To see the effect, hover your cursor over the image. </h2> 
<div class="overlay-container"> 
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png"> 
<div class="left-right"> 
<h2>Left to Right Image Overlay</h2> 
</div> 
</div> 
</body> 
</html>

Sliding Overlay from Right to Left

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

<html> 
<head> 
<style> 
.overlay-container img { 
width: 200px; 
height: 200px; 
margin-left: 250px; 
} 
.overlay-container { 
position: relative; 
width: 67%; 
height: auto; 
} 
.overlay-container:hover .right-left { 
opacity: 1; 
width: 200px; 
} 
.right-left { 
position: absolute; 
transition: 0.9s ease; 
opacity: 0.3; 
width: 0; 
border-radius: 5px; 
height: 200px; 
top: 0; 
right: 0; 
background-color: #d346e6; 
text-align: center; 
color: #ffffff; 
} 
h2 { 
text-align: center; 
} 
</style> 
</head> 
<body> 
<h2>To see the effect, hover your cursor over the image. </h2> 
<div class="overlay-container"> 
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png"> 
<div class="right-left"> 
<h2>Right to Left Image Overlay</h2> 
</div> 
</div> 
</body> 
</html>

Fade Overlay Effect

The following example shows how to create an overlay effect when the user hovers over an image:

<html> 
<head> 
<style> 
.overlay-container img { 
width: 200px; 
height: 200px; 
margin-left: 250px; 
} 
.overlay-container { 
position: relative; 
width: 25%; 
} 
.overlay-container:hover .fade-effect { 
opacity: 0.9; 
height: 200px; 
} 
.fade-effect { 
position: absolute; 
transition: 0.9s ease; 
opacity: 0; 
width: 200px; 
height: 200px; 
border-radius: 5px; 
top: 0; 
left: 250px; 
background-color: #d346e6; text-align: center; 
color: #ffffff; 
} 
h2 { 
text-align: center; 
} 
</style> 
</head> 
<body> 
<h2>To see the effect, hover your cursor over the image. </h2> 
<div class="overlay-container"> 
<img src= "https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png"> 
<div class="fade-effect"> 
<h2>Fade Overlay Effect</h2> 
</div> 
</div> 
</body> 
</html>

Image Overlay Title

Here’s an example that displays the image’s title when the user hovers over it.

<html> 
<head> 
<style> 
.overlay-container img { 
width: 200px; 
height: 200px; 
margin-left: 250px; 
} 
.overlay-container { 
position: relative; 
width: 25%; 
} 
.overlay-container:hover .title-overlay { 
opacity: 0.9; 
height: 80px; 
} 
.title-overlay { 
position: absolute; 
transition: 0.9s ease; 
opacity: 0; 
width: 200px; 
height: 80px; 
border-radius: 5px; 
bottom: 0; 
left: 250px; 
background-color: #d346e6; 
text-align: center; 
color: #ffffff; 
} 
h1 { 
text-align: center; 
color: #a0f037; 
} 
</style> 
</head> 
<body> 
<h2>To see the effect, hover your cursor over the image. </h2> 
<div class="overlay-container"> 
<img src= "https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png"> 
<div class="title-overlay"> 
<h1>Tutorialspoint</h1> 
</div> 
</div> 
</body> 
</html>

Image Overlay Icon

Here’s an example of an icon that appears overlaid on an image when the user hovers over it.

<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<style> 
.overlay-container { 
position: relative; 
width: 200px; 
height: 200px; 
margin-left: 40%; 
} 
.overlay-container img { 
width: 100%; 
height: 100%; 
} 
.icon-overlay { 
position: absolute; 
transition: 0.9s ease; 
opacity: 0; 
width: 100%; 
height: 100%; 
top: 0; 
background-color: rgba(211, 70, 230, 0.9); 
text-align: center; 
color: #ffffff; 
display: flex; 
justify-content: center; 
align-items: center; 
} 
.overlay-container:hover .icon-overlay { 
opacity: 1; 
} 
.display-icon { 
color: rgb(60, 235, 50); 
font-size: 100px; 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
} 
h2 { 
text-align: center; 
} 
</style> 
</head> 
<body> 
<h2>To see the effect, hover your cursor over the image.</h2> 
<div class="overlay-container"> 
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png"> 
<div class="icon-overlay"> 
 
<i class="fa fa-star"></i> 
 
</div> 
</div> 
</body> 
</html>

CSS Overrides – Related Properties

Below is a list of overridden CSS properties:

Property	Value
position	Defines how an element is positioned on the page.
opacity	Sets the element’s transparency.
z-index	Sets the element’s stacking order.
transition	Defines different types of animation effects that can be applied to an element.

CSS Overlays

What are Overlays?

CSS Overlay

Example

Sliding Overlay from Bottom to Top

Sliding Overlay from Left to Right

Sliding Overlay from Right to Left

Fade Overlay Effect

Image Overlay Title

Image Overlay Icon

CSS Overrides – Related Properties

Related Posts

CSS opacity not working in IE11

CSS styling numbers

CSS :lang pseudo-class

Leave a ReplyCancel Reply