CSS overlay
CSS is all about presentation. Discover how CSS overlay works to transform plain HTML into a premium user experience in the guide below.
Overlay refers to the action of applying a layer of covering onto a surface. Essentially, it involves placing one element over another. Utilizing overlays enhances the visual appeal of a webpage and simplifies the design process.
Combining two div elements in the same position to show up when needed is known as creating an overlay effect. Triggering the display of the second div can be achieved by hovering over or clicking on the first div. Within these two divs, one acts as the overlay containing the content to be displayed upon user interaction, while the other functions as a container holding the image along with its overlay content.
Fade overlay effect
In this overlay effect, as the cursor hovers over the image, the overlay will display on top of the image. Let's explore its functionality.
Example
<!DOCTYPE HTML>
<html>
<head>
<title>Image Overlay</title>
<style>
.container img {
width: 300px;
height: 300px;
}
.container {
position: relative;
width: 25%;
height: auto;
}
.overlay{
position: absolute;
transition: 0.5s ease;
height: 300px;
width: 300px;
top: 0;
left: 20px;
background-color: lightblue;
opacity: 0;
}
.container:hover .overlay {
opacity: 0.9;
}
</style>
</head>
<body>
<center>
<h1>Fade in Overlay</h1>
<h2>Move the cursor over the image to see the effect.</h2>
<div class="container">
<img src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<div class="overlay"></div>
</div>
</center>
</body>
</html>
Image overlay slide
We have the option to implement a sliding overlay effect in four variations: top, bottom, left, and right. Let's explore each type individually through practical examples.
Slide in Overlay from top to bottom
Initially, we will explore the process of generating a slide-in overlay from the top through an illustrative example.
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
.container img {
width: 300px;
height: 300px;
}
.container {
position: relative;
width: 25%;
height: auto;
}
.container:hover .overlay {
opacity: 1;
height: 300px;
}
.overlay{
position: absolute;
transition: 0.7s ease;
opacity: 0;
width: 300px;
height: 0;
top: 0;
right: 20px;
background-color: lightblue;;
}
</style>
</head>
<body>
<center>
<h1>Slide in Overlay from top to bottom</h1>
<h2>Move the cursor over the image to see the effect.</h2>
<div class="container">
<img src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<div class="overlay"></div>
</div>
</center>
</body>
</html>
Slide in Overlay from bottom to top
In this overlay technique, as the cursor hovers over the image, a sliding animation will occur from the bottom to the top. This behavior is demonstrated visually in the illustration below.
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
.container img {
width: 300px;
height: 300px;
}
.container {
position: relative;
width: 25%;
height: auto;
}
.container:hover .overlay {
opacity: 1;
height: 300px;
}
.overlay{
position: absolute;
transition: 0.7s ease;
opacity: 0;
width: 300px;
height: 0px;
bottom: 0;
right: 20px;
background-color: lightblue;;
}
</style>
</head>
<body>
<center>
<h1>Slide in Overlay from bottom to top</h1>
<h2>Move the cursor over the image to see the effect.</h2>
<div class="container">
<img src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<div class="overlay"></div>
</div>
</center>
</body>
</html>
Slide in Overlay from left to right
As indicated by its name, the sliding effect occurs horizontally from left to right. Refer to the example below for a detailed understanding.
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
.container img {
width: 300px;
height: 300px;
}
.container {
position: relative;
width: 25%;
height: auto;
}
.container:hover .overlay {
opacity: 1;
width: 300px;
}
.overlay{
position: absolute;
transition: 0.7s ease;
opacity: 0;
width: 0;
height: 100%;
bottom: 0;
left: 20px;
background-color: lightblue;;
}
</style>
</head>
<body>
<center>
<h1>Slide in Overlay from left to right</h1>
<h2>Move the cursor over the image to see the effect.</h2>
<div class="container">
<img src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<div class="overlay"></div>
</div>
</center>
</body>
</html>
Slide in Overlay from right to left
It bears resemblance to the preceding sliding animations, with the distinction that the sliding motion occurs from the right-hand side towards the left.
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
.container img {
width: 300px;
height: 300px;
}
.container {
position: relative;
width: 25%;
height: auto;
}
.container:hover .overlay {
opacity: 1;
width: 300px;
}
.overlay{
position: absolute;
transition: 0.7s ease;
opacity: 0;
width: 0;
height: 100%;
bottom: 0;
right: 20px;
background-color: lightblue;;
}
</style>
</head>
<body>
<center>
<h1>Slide in Overlay from right to left</h1>
<h2>Move the cursor over the image to see the effect.</h2>
<div class="container">
<img src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<div class="overlay"></div>
</div>
</center>
</body>
</html>
Image Overlay title
In the image overlay effect, as the cursor hovers over an image, the title will be displayed on top of the image. Refer to the following diagram for a visual representation of this functionality.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
text-align: center;
}
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
max-width: 300px;
}
img {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
width: 100%;
opacity:0;
transition: .9s ease;
font-size: 25px;
padding: 20px;
}
.container:hover .overlay {
opacity: 1.5;
}
</style>
</head>
<body>
<h1>Image Overlay Title Effect</h1>
<h2>Move your mouse over the image to see the effect.</h2>
<center>
<div class="container">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<div class="overlay">Welcome to C# Programming</div>
</div> </center>
</body>
</html>
Image Overlay icon
In this overlay technique, when the mouse hovers over, an icon will overlay the entire image. By setting a link on this icon, users can navigate between pages. This functionality is illustrated in the example below.
Example
<!DOCTYPE html>
<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>
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 1s ease;
background-color: lightblue;
}
.container:hover .overlay {
opacity: 1;
}
.icon {
color: blue;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<center>
<h1>Image Overlay icon Effect</h1>
<h2>Move your mouse over the image to see the effect.</h2>
<div class="container">
<img src="https://placehold.co/200x150/1abc9c/ffffff?text=Sample+Image" class="image">
<div class="overlay">
<a href="#" class="icon">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
</center>
</body>
</html>
