title: How do I get a h1 on top of an image, a paragraph in the middle and make the image darker?
body: <p>Currently working on getting some text ONTOP of an image and make the image a bit darker.</p>
  
  <p>However, what I try doesn't seem to work. I cannot get the image darker, and the text either get's above or below the image, but not on top as I try to do.</p>
  
  <p>the RED square = the image, the black square will be the placing of the H1 (TRANSPARANT).</p>
  
  <p>HTML: </p>
  
  <pre><code> &lt;div id="mainarticle"&gt;
              &lt;a href="artikels.html"&gt; 
                  &lt;img src="images/interview.jpg"&gt;
                  &lt;div id="ontop"&gt;
                  &lt;h3&gt; Lol &lt;/h3&gt;  
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>#ontop {
      height: 70px;
      width: 100%;
      background-color: rgba(0,0,0,0.4);
  }
  
  #mainarticle img {
      height: 100vh;
      width: 100%;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/uLf2jme3/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p><a href="https://i.stack.imgur.com/9k0If.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9k0If.jpg" alt="Example"></a></p>