title: Darken image overlay and add text over it in CSS
body: <p>How would I darken (add a semi-transparent overlay) and add text to this image (but centred horizontally and vertically) as below:</p>
  
  <p><img src="https://i.stack.imgur.com/b9FBA.jpg" alt="enter image description here"></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;img src="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg" id="top" data-appear-animation="fadeIn"&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#top {
  width: 100%;
  height: auto;
  }
  body {
  margin: 0px;
  }
  </code></pre>
  
  <p>Fiddle here: <a href="http://jsfiddle.net/6jf0nxd5/" rel="nofollow noreferrer">http://jsfiddle.net/6jf0nxd5/</a></p>