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: 490px;font: bold 17px Arial;color: #fff;padding: 4px 0px;}

<div id="banner">
<div class="container">
<div class="slideshow">
<img src="https://i.stack.imgur.com/KOi78.jpg" alt="Lorem Ipsum">
<div class="slogan">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>

2 Answers
2

One way to do that is to use a pseudo element, like ::after.

::after

First I added a pseudo element on the slideshow element for the gradient, and positioned it using position: absolute (and position: relative on the slideshow), then by setting different z-index on the pseudo and the slogan, layered it between the image and text.

slideshow

position: absolute

position: relative

slideshow

z-index

slogan

.container {
width: 1000px;
padding: 0;
margin: 0 auto;
}

.slideshow {
position: relative;
}

.slideshow::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8));
z-index: 1;
}

.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;
z-index: 2;
}

.slogan h1 {
font: bold 30px Arial;
color: #fff;
}

.slogan p {
width: 490px;
font: bold 17px Arial;
color: #fff;
padding: 4px 0px;
}

<div id="banner">
<div class="container">
<div class="slideshow">
<img src="https://i.stack.imgur.com/KOi78.jpg" alt="Lorem Ipsum">
<div class="slogan">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>

As an alternative option, instead of using an img tag you can place the image as a background for your slideshow div. CSS backgrounds can have multiple layers so to speak, by defining multiple backgrounds they stack on top of each other. I suggest removing your image tag and using the code below:

.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)), url('https://i.stack.imgur.com/KOi78.jpg') no-repeat;
background-size: cover;
background-position: center;
height: 400px;
/*CSS from Img tag not applied to slideshow*/
border: 3px solid #153f27;
border-radius: 5px;
box-shadow: 4px 3px 5px 0px rgba(168, 168, 168, 1);
}

.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;
z-index: 2;
}

.slogan h1 {
font: bold 30px Arial;
color: #fff;
}

.slogan p {
width: 490px;
font: bold 17px Arial;
color: #fff;
padding: 4px 0px;
}

<div id="banner">
<div class="container">
<div class="slideshow">
<div class="slogan">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.