How to add a linear-gradient in an image using CSS?
How to add a linear-gradient in an image using CSS? I have this snippet code. I want to add a linear-gradient to my image using Css. But I tried this code so far but the linear-gradient doesn't add anything. Do I have to use position:absolute or relative to overlay my linear-gradient inside my image? please help. I use this Please add this image to the image tag because jsfiddle doesn't have an option to add local files and upload it. Sorry for the inconvenience. .container { width: 1000px;padding: 0;margin: 0 auto;} .slideshow {position: relative; background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.8));} .slideshow img {border: 3px solid #153f27;border-radius: 5px;-webkit-box-shadow: 4px 3px 5px 0px rgba(168,168,168,1);-moz-box-shadow: 4px 3px 5px 0px rgba(168,168,168,1);box-shadow: 4px 3px 5px 0px rgba(168,168,168,1);} .slogan {position: absolute; top: 30px; padding: 25px 20px;} .slogan h1 {font: bold 30px Arial;color: #fff;} .slogan p {width: 49...