HOW TO USE DARK OVERLAY IN YOUR CSS STYLING

Peter Imiefase Sarah
2 min readMay 3, 2022

--

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.

Resources

W3School

geeksforgeeks

Nazanin Ashrafi

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Peter Imiefase Sarah
Peter Imiefase Sarah

Written by Peter Imiefase Sarah

HTML & CSS tutor ~~~ Web Development ~~~ Health

No responses yet

Write a response