What is the best way to apply linear gradient on an image?

Question

I'm trying to make the image be slightly darker at the bottom with a linear gradient but I can't get it to work. I'm not sure what I'm doing wrong.

I tried to use ::after in css as I've seen on other sites, I tried using IDs, I tried using `background-image`` straight in css but I can't seem to get it to work. I also tried making the gradient affect only the image, the whole section, the entire article but still it does not work. I don't know what else to try.

.Series {
  background-color: transparent;
  background-image: -webkit-linear-gradient(-270deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

<section id="Series">
  <img class="imgshadow" src="cara2.jpg" width="240">
  <div class="texto1">text</div>
  <h1 class="subtext1">text</h1>
</section>

Answer 1

You may consider mix-blend-mode :

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

Also, fix your selector from class . to id #.

#Series {
  background-color: transparent;
  background-image: -webkit-linear-gradient(-270deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

img {
  mix-blend-mode: overlay
}

body {
  background: purple
}

<section id="Series">
  <img class="imgshadow" src="http://dummyimage.com/200/0df" width="240">
  <div class="texto1">text</div>
  <h1 class="subtext1">text</h1>
</section>

Answer 2

The answer for your question is you were using white color as the gradient colour so i have changed just your color code to fix the issue. Here is the link for the fiddle fix Fiddle Link

<section id="Series">
  <img class="imgshadow" src="https://content.fortune.com/wp-content/uploads/2015/02/0ahuznqcmgooafcr7vfc1p9oc9r45f84l1uj4mit2smcopfaxr0gatttneqwlqk-dnbb_eyklizhxhv1dgnj0c.jpg" width="240">
  <div class="texto1">text</div>
  <h1 class="subtext1">text</h1>
</section>

CSS

#Series {
  background-color: transparent;
  background-image:  -webkit-linear-gradient(-270deg, rgba(23, 22, 22, 0.39), rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradien(-270deg, rgba(23, 22, 22, 0.39), rgba(255, 255, 255, 0) 100%);
  position:relative;
 }
 .texto1{
   position:absolute;
   z-index:99999;
   top:0px;
 }
  .imgshadow{
   mix-blend-mode: overlay
 }
 .subtext1{
     position:absolute;
   z-index:99999;
   top:10px; 
 }

Answer 3

You are trying to select elements with class "Series". The HTML element it self has an id of "Series", so the gradient can't actually get to this element.

Replace .Series with #Series, or id="Series" with class="Series".

Answer 4

The ID selector for css is '#' and not '.';

Try using #Series { ... }