Image overlay is the technique of adding text or images over another base image.
Background-image and background CSS properties to add image and linear-gradient overlay effect.
Example:
{
background-image: linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),url(‘images/windmill.jpg’);
}
position:absolute, top, bottom, right, left CSS properties to control the position of overlay image or text.
Example:
{
position: absolute;
}
There are two types of overlay:
Image overlay – Adding image over an image, e.g., watermarked images where you see a logo on top of an image.
Example-1:
Output will be:
Text overlay – Adding text over an image, e.g., hero images, marketing banners like above Airbnb example.
Example-2:
Output will be
