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 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
Top comments (15)
It is really cool
That's really helpful 🙌
Thank you 😍🙌🙌
thank you so much, this came very handy.
I'm glad it was helpful 🙏🙏
third section helped
Thanks for this code It really helps creating my first website
Thankyou 🙂
Thanks for your help!
I'm glad it was helpful ^_^
Thank you for your great post. it helped me.
And I got cheerful when I saw the first search result Is an Iranian's article, Congratulations :)
Glad to here it was helpful ^_^
Thanks, just used this at work :)
this is helpful today I'm searching on google and its leads to your Artical.