title: How to add a gradient/filter in the image in CSS
body: <p>I have an image right here:</p>
  
  <p><img src="https://i.stack.imgur.com/jrPZZ.jpg" alt="enter image description here"></p>
  
  <p>and I want to replicate the css styles in the website theverge.com (see image below)</p>
  
  <p><img src="https://i.stack.imgur.com/iLFrr.jpg" alt="enter image description here"></p>
  
  <p>I will use this in my blog (in the main page) because im trying to replicate what the website theverge.com have. It's like having the Title of the post and the author's name over the semi transparent gradient and featured image. </p>
  
  <p>please help. </p>
  
  <p>here's the structure of my html</p>
  
  <p><a href="http://jsfiddle.net/Kareen/kwPP8/2/" rel="noreferrer">http://jsfiddle.net/Kareen/kwPP8/2/</a></p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;h3&gt;Some Title Goes Here&lt;/h3&gt;
      &lt;div&gt;Author: Bill Jones&lt;/div&gt;
      &lt;img src="http://lorempixel.com/300/200/nature/5" /&gt;           
  &lt;/div&gt;
  </code></pre>