loading...

Two ways to create an image with a colour overlay in CSS

Ellen Macpherson on September 29, 2019

Using an image with a dark overlay is one of the quickest ways to make a beautiful hero header for a blog, landing page or portfolio. It's a trick ... [Read Full]
markdown guide
 

We can also use a solution like below but it will require some what more CSS.
Here is the link: codepen.io/sonawaneapekshit/pen/Rw...

 
 

I like these solutions, thank you for sharing. Did you notice a performance difference between the two solutions for color overlay?

 
 

Thanks for this post! I’m excited to try this out and spice up my portfolio site πŸ‘©πŸ½β€πŸ’»πŸ‘πŸΌπŸ‘πŸΌ

 

The first method won't work. You have to position absolutely img or section tag. Otherwise the img will fit all the available space and push section tag with text out out the view.

 
 
 
code of conduct - report abuse