There was a time when I had to look everywhere to find out how to make images darker and now I know 3 ways to do this. so lets get to the point.

1. Using opacity :

Setting the basic:

This is the original pic:

Setting css :

First we lower the opacity of the pic

img {
opacity: 0.5;
}

By setting the opacity to 0.5 , the images will turn white(ish)

Now all we need to do to make it darker is to change the background color to black :

ul {
background-color: black;
}

We can use this to create cool hover effect. you can check out the pen that I made

2. Using filter property:

Just use filter: brightness(50%); for the image to lower the brightness.

3. RGBA colors:

Let's say you want to set an image as as background. if you don't darken it ,everything you put on the image like buttons, texts etc will not look cool. you need to darken it to make other stuff stand out
So how do we do that?
It's simple. let me show you

Setting the basic:

header {
    width: 100%;
    background-image: url(EauDp1hUcAAE-bK.jpg);
    background-position: center;
    background-size: cover;
}

For making it darker, we add linear-gradient(black,black).
Choose a color and lower the transparency of the color

header {
background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(EauDp1hUcAAE-bK.jpg);
}

To sum it up :

• Use opacity and filter property to darken an image and create cool hover effect with it.
• Use RGBA colors to make your background image darker.

You can connect with me on twitter