Quick + Easy Colour Overlay
No need to position divs on top of one another anymore to achieve a colour overlay on top of an image. I stumbled across this CSS that does it for you. Check out these quick and easy steps!
1. Create a Div
Assign it a class of tinted-image.
2. Add a Background Image
Assign it a linear gradient.
3. Adjust the Linear Gradient
Play with the values to get the desired color gradient and transparency. If you’re looking for a single colour transparency, just use the same hex and transparency values for both (as shown above).
This saved me time and the headache of positioning. I hope it does the same for you!Posted on: May 13, 2014 8:37 pm