HOW TO USE DARK OVERLAY IN YOUR CSS STYLING
Prerequisite
In this article, readers should know how to darken an image to their taste and have a very good idea of the z-index and opacity styles.
This is what we just call the overlay function. Sometimes, we notice some pictures on some sites appear to me darker aside from the original one.
This can be achieved with the use of code or merely editing with any editing app.
I recommend the use of code here as it appears easier to control the darkening effect of the picture.
The use of z-index and opacity is very important here.
We simply create a div for our image and another ( in between ) for our background color. We apply the z-index:1; to the styling of our first div and z-index:2; to the second div’s styling.
We apply our background image and another necessary styling in the first div.
As in,
In the second div, we apply our background color which is black in this case since we want to darken it and apply necessary styling as well.
Note that the height and width should be the same in both the image and the color used.
After this is achieved, don’t be scared when you just see the black color appear. What we simply do is apply opacity to the second div. Thereafter, we can regulate the amount of opacity. Below is the summary of my write up in code;
We can decide to darken or lighten our image by increasing or decreasing opacity. Our headings and other contents can also be included.
