CSS Overlay
To overlay means to set one thing on top of another. The CSS overlay makes a web page attractive and easy to design.
To create an overlay effect, you put two div together in the same position, but both will only appear when required. For the second div to appear, you can hover or click on one div. There are two divs in this case: an overlay div that shows up when the user hovers over the image and a container div that contains both the image and its CSS overlay.
Fade Overlay Effect
This overlay effect appears on the image when the cursor is moved over it. Observe the following example.
Example
<!DOCTYPE HTML>
<html>
<head>
<title>Image Overlay Example</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: lightgray;
opacity: 0;
}
.container:hover .overlay {
opacity: 0.9;
}
</style>
</head>
Image Overlay Slide
A sliding overlay effect can be created in four types: top, bottom, left, and right. Observe as we explain each type with examples. You can also check out how to set background image with CSS
Slide In Overlay From Top To Bottom
First, how to create the slide in an overlay from the top.
<!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: lightgray;;
}
</style>
</head>
<body>
<center>
<h1>Overlay slide in from top to bottom</h1>
<h2>Place the cursor over the image to see the effect.</h2>
<div class="container">
<img src= "redeagle.png">
<div class="overlay"></div>
</div>
</center>
</body>
</html>
Slide In Overlay From Bottom To Top
When we place the cursor over the image, it will slide from bottom to top. Observe the example 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: lightgray;;
}
</style>
</head>
<body>
<center>
<h1>Overlay slide in from bottom to top</h1>
<h2>Place the cursor over the image to see the effect.</h2>
<div class="container">
<img src= "redeagle.png">
<div class="overlay"></div>
</div>
</center>
</body>
</html>
Slide In Overlay From Left To Right
With this effect, it slides from left to right. Observe the following 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;
width: 300px;
}
.overlay{
position: absolute;
transition: 0.7s ease;
opacity: 0;
width: 0;
height: 100%;
bottom: 0;
left: 20px;
background-color: lightgray;;
}
</style>
</head>
<body>
<center>
<h1>Overlay slide in from left to right</h1>
<h2>Place the cursor over the image to see the effect.</h2>
<div class="container">
<img src= "redeagle.png">
<div class="overlay"></div>
</div>
</center>
</body>
</html>
Slide In Overlay From Right To Left
With this effect, the sliding in it is from right to left. Observe the example 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;
width: 300px;
}
.overlay{
position: absolute;
transition: 0.7s ease;
opacity: 0;
width: 0;
height: 100%;
bottom: 0;
right: 20px;
background-color: lightgray;;
}
</style>
</head>
<body>
<center>
<h1>Overlay slide in from right to left</h1>
<h2>Place the cursor over the image to see the effect.</h2>
<div class="container">
<img src= "redeagle.png">
<div class="overlay"></div>
</div>
</center>
</body>
</html>
Image Overlay Title
In this image overlay effect, when the cursor is placed over an image, we see the title on the image. Observe the example below.
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>Place your mouse over the image to see the effect.</h2>
<center>
<div class="container">
<img src="redeagle.png">
<div class="overlay">Hello World</div>
</div> </center>
</body>
</html>
Image Overlay Icon
With this effect, when you hover over an image, there will be an icon that covers the entire picture. You can set the link on that icon to swap between the pages. Observe the following example.
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: lightgray;
}
.container:hover .overlay {
opacity: 1;
}
.icon {
color: Orange;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<center>
<h1>Image Overlay icon Effect</h1>
<h2>Place your mouse over the image to see the effect.</h2>
<div class="container">
<img src="redeagle.png" class="image">
<div class="overlay">
<a href="#" class="icon">
<i class="fa fa-home"></i>
</a>
</div>
</div>
</center>
</body>
</html>
