Placing text or graphics over another basic image is known as image overlay. Using CSS attributes and pseudo-elements is one of the simplest ways to apply an image or text overlay. In a nutshell, the following techniques are used to create CSS overlay effects:

Use the background image and CSS attributes to add an image and a linear gradient overlay.
::after and ::before CSS pseudo-elements along with content CSS property to control the content in case of text overlay.
Position:absolute, top, bottom, right, and left CSS properties to control the position of overlay image or text.

Image Overlay

When an image is used as a backdrop image and text, links, or other elements are added inside it, the term "image overlay" is used. The 'card-img-overlay' attribute from Bootstrap can be used to accomplish this. Additionally, we can achieve it using standard CSS and a bootstrap theme.

Types of Overlays

The five different overlay types:

Left overlay
Right overlay
Top overlay
Bottom overlay
Fade overlay

You will require two divs. The first will be your overlay div, which will carry the information that will appear when the user hovers over the image, and the second will be a container that houses both the image and its overlay. Two classes will be present in the inner div, symbolising the overlay.

One will style every overlay, while the other will represent the particular type of overlay (left, right, up, down, or fade). Your image should be positioned inside the outer (container) div but outside the inner (overlay) div. For the benefit of people who rely on the image, don't forget to include an alternate text describing it in the screen reader.

Html Code:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>Image Overlay</title>
</head>
<body>
 <center>
 <h1 class="title">
 Javatpoint
 </h1>
 <b>Image Overlay</b>
 <br>
 <br>
 <div class="container">
 <img src=
"https://app.gemoo.com/share/image-annotation/572427852593373184?codeId=DGV1KGzJRe1Go&origin=imageurlgenerator”
 class="image">
 <div class="overlay overlayLeft"></div>
 </div>
 </center>
</body>
</html>

Image:

Image Overlay CSS

CSS Code:

Specify the container's width and height as well as its position in relation to its default position. Setting the overlay's location to absolute is essential for it to function. That indicates where it is in relation to the image, which in this case is its nearest-positioned ancestor. Set the overlay's opacity to zero, or fully translucent, so that it doesn't always appear and only does so when the user hovers over the image.

To change the colour of your overlay, use "background colour". Use "transition" to make the overlay emerge gradually rather than abruptly over the image. Since we've set the overlay's opacity to zero, we want to change it to one when we hover over the container. That implies the overlay will appear once the user hovers over the container item.

<style>
 body {
 text-align: center;
 }
 h1 {
 color: black;
 }
 .container img {
 width: 263px;
 height: 192px;
 }
 .container {
 position: relative;
 width: 400px;
 height: auto;
 }
</style>

Fade Overlay: The overlay's width and height are equal to the width and height of the underlying div image. The overlay appears on top of the image after you hover over it.

Css code:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>Image Overlay</title>
 <style>
 body {
 text-align: center;
 }
 h1 {
 color: black;
 }
 .container img {
 width: 263px;
 height: 192px;
 }
 .container {
 position: relative;
 width: 400px;
 height: auto;
 }
 .overlay {
 position: absolute;
 transition: all 0.3s ease;
 opacity: 0;
 background-color: #9bcd9b;
 }
 .container:hover .overlay {
 opacity: 1;
 }
 .overlayFade {
 height: 263px;
 width: 192px;
 top: 0;
 left: 75px;
 background-color: #9bcd9b;
 }
 </style>
</head>
<body>
 <center>
 <h1 class="title">
 Javatpoint
 </h1>
 <b>Image Overlay</b>
 <br>
 <br>
 <div class="container">
 <img src=
"https://app.gemoo.com/share/image-annotation/572427852593373184?codeId=DGV1KGzJRe1Go&origin=imageurlgenerator”
 class="image">
 <div class="overlay overlayFade"></div>
 </div>
 </center>
</body>
</html>

Output:

Once we run this code, we can observe the faded output of the javatpoint image. In the above example:

The .image-container element acts as the container for both images. Both the .background and .overlay images are positioned absolutely within this container, ensuring they stack on top of each other.
The z-index property for .overlay is set to 1 to ensure it stays on top of the .background image.

Left Overlay: The overlay's height is 100% of the image's height. The left and width are both set to zero. When you hover over the image, the width progressively moves from left to right and is set to 100%.

Css code:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>Image Overlay</title>
 <style>
 body {
 text-align: center;
 }
 h1 {
 color: black;
 }
 .container img {
 width: 263px;
 height: 192px;
 }
 .container {
 position: relative;
 width: 400px;
 height: auto;
 }
 .overlay {
 position: absolute;
 transition: all 0.3s ease;
 opacity: 0;
 background-color: #9bcd9b;
 }
 .container:hover .overlay {
 opacity: 1;
 }
 .overlayLeft{
 height: 100%;
 width: 0;
 top: 0;
 left: 75px;
 background-color: #9bcd9b;;
 }
 .container:hover .overlayLeft{
 width: 250px;
 }
 </style>
</head>
<body>
 <center>
 <h1 class="title">
 Javatpoint
 </h1>
 <b>Image Overlay</b>
 <br>
 <br>
 <div class="container">
 <img src=
"https://app.gemoo.com/share/image-annotation/572427852593373184?codeId=DGV1KGzJRe1Go&origin=imageurlgenerator”
 class="image">
 <div class="overlay overlayLeft"></div>
 </div>
 </center>
</body>
</html>

Output:

Once we run this code, we can observe the left overlay output of the javatpoint image. In the above example:

The .image-container element acts as the container for both images. Both the .background and .overlay images are positioned absolutely within this container, ensuring they stack on top of each other.
The z-index property for .overlay is set to 1 to ensure it stays on top of the .background image.

Right Overlay: The overlay's height is 100% of the image's height. The width is set to the right and is zero. When you hover over the image, the width progressively moves from right to left and is set to 100%.

Css code:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>Image Overlay</title>
 <style>
 body {
 text-align: center;
 }
 h1 {
 color: black;
 }
 .container img {
 width: 263px;
 height: 192px;
 }
 .container {
 position: relative;
 width: 400px;
 height: auto;
 }
 .overlay {
 position: absolute;
 transition: all 0.3s ease;
 opacity: 0;
 background-color: #9bcd9b;
 }
 .container:hover .overlay {
 opacity: 1;
 }
 .overlayRight{
 height: 100%;
 width: 0;
 top: 0;
 right: 75px;
 background-color: #9bcd9b;;
 }
 .container:hover .overlayRight{
 width: 250px;
 }
 </style>
</head>
<body>
 <center>
 <h1 class="title">
 Javatpoint
 </h1>
 <b>Image Overlay</b>
 <br>
 <br>
 <div class="container">
 <img src=
"https://app.gemoo.com/share/image-annotation/572427852593373184?codeId=DGV1KGzJRe1Go&origin=imageurlgenerator”
 class="image">
 <div class="overlay overlayRight"></div>
 </div>
 </center>
</body>
</html>

Output:

Once we run this code, we can observe the right overlay output of the javatpoint image. In the above example:

The .image-container element acts as the container for both images. Both the .background and .overlay images are positioned absolutely within this container, ensuring they stack on top of each other.
The z-index property for .overlay is set to 1 to ensure it stays on top of the .background image.

Top Overlay: The overlay's width is equal to the image's width (100%). Height is set to the top and is zero. Once you hover over the image, the height is set to 100% and moves progressively from top to bottom.

Css code:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>Image Overlay</title>
 <style>
 body {
 text-align: center;
 }
 h1 {
 color: black;
 }
 .container img {
 width: 263px;
 height: 192px;
 }
 .container {
 position: relative;
 width: 400px;
 height: auto;
 }
 .overlay {
 position: absolute;
 transition: all 0.3s ease;
 opacity: 0;
 background-color: #9bcd9b;
 }
 .container:hover .overlay {
 opacity: 1;
 }
 .overlayTop{
 width: 250px;
 height: 0;
 top: 0;
 right: 75px;
 background-color: #9bcd9b;;
 }
 .container:hover .overlayTop{
 height: 250px;
 }
 </style>
</head>
<body>
 <center>
 <h1 class="title">
 Javatpoint
 </h1>
 <b>Image Overlay</b>
 <br>
 <br>
 <div class="container">
 <img src=
"https://app.gemoo.com/share/image-annotation/572427852593373184?codeId=DGV1KGzJRe1Go&origin=imageurlgenerator”
 class="image">
 <div class="overlay overlayTop"></div>
 </div>
 </center>
</body>
</html>

Output:

Once we run this code, we can observe the top overlay output of the javatpoint image. In the above example:

The .image-container element acts as the container for both images. Both the .background and .overlay images are positioned absolutely within this container, ensuring they stack on top of each other.
The z-index property for .overlay is set to 1 to ensure it stays on top of the .background image.

Bottom Overlay: The overlay's width is equal to the image's width (100%). Height is set to bottom and is zero. When you hover over a picture, the height is automatically set to 100% and increases gradually from bottom to top.

Css code:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>Image Overlay</title>
 <style>
 body {
 text-align: center;
 }
 h1 {
 color: black;
 }
 .container img {
 width: 273px;
 height: 192px;
 }
 .container {
 position: relative;
 width: 400px;
 height: auto;
 }
 .overlay {
 position: absolute;
 transition: all 0.3s ease;
 opacity: 0;
 background-color: #9bcd9b;
 }
 .container:hover .overlay {
 opacity: 1;
 }
 .overlayBottom{
 width: 250px;
 height: 0;
 bottom: 0;
 right: 75px;
 background-color: #9bcd9b;;
 }
 .container:hover .overlayBottom{
 height: 255px;
 }
 </style>
</head>
<body>
 <center>
 <h1 class="title">
 Javatpoint
 </h1>
 <b>Image Overlay</b>
 <br>
 <br>
 <div class="container">
 <img src=
"https://app.gemoo.com/share/image-annotation/572427852593373184?codeId=DGV1KGzJRe1Go&origin=imageurlgenerator"
 class="image">
 <div class="overlay overlayBottom"></div>
 </div>
 </center>
</body>
</html>

Output:

Once we run this code, we can observe the bottom overlay output of the javatpoint image. In the above example:

The .image-container element acts as the container for both images. Both the .background and .overlay images are positioned absolutely within this container, ensuring they stack on top of each other.
The z-index property for .overlay is set to 1 to ensure it stays on top of the .background image.

Conclusion

In conclusion, creating photo overlays in CSS entails an aggregate of relative and absolute positioning within a containing detail. Using the location, z-index, and once-in-a-while opacity houses, you can easily overlay one photograph on the pinnacle of another or vicinity a coloured overlay over a picture.

This flexible technique may be adapted for various layouts and person-enjoy functions, whether or not you need to add emphasis, create a mood, or ensure factors stand out. Like many CSS strategies, understanding the foundational ideas is prime, and from there, you can tailor the method to fit your particular layout desires.

CSS Introduction

CSS Attributes

Questions

Difference

Misc

CSS Introduction

CSS Attributes

Questions

Difference

Misc

Image Overlay CSS

Image Overlay

Types of Overlays

CSS Code:

Conclusion