title: how to create a gradient effect on half of an image
body: <p>I am trying to create a gradient effect over half of my image, I found this which gives a full gradient overlay effect over my image</p>
  
  <pre><code>.tinted-image {
    background: 
      /* top, transparent red */ 
      rgba(255, 0, 0, 0.25),
      /* bottom, image */
      url(image.jpg);
  }
  </code></pre>
  
  <p>but I was wondering how I can only apply this effect to only half of my image,I searched online but didnt see exactly what i ws looking for, so I decided to post.</p>
  
  <p>By half of my image I mean vertically not horizontally</p>
  
  <p>Us there anyone who has an idea of this</p>