title: Display text over image on hover
body: <p>I am trying to display a text over an image and it works, but when I mouse over the text, it blinks!</p>
  
  <p><a href="https://jsfiddle.net/6k2Lhaje/1/" rel="nofollow">https://jsfiddle.net/6k2Lhaje/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;a class="wrapper"&gt;
  &lt;img style="margin-top:50px;" 
  src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"
  alt="" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>div.title {
      display: none;
      position: relative;
      text-align: center;
      top: -170px;
  }
  
  a.wrapper:hover + div {
      display: block;
  }
  
  &lt;div class="title"&gt;&lt;h1&gt;TEXT HERE&lt;/h1&gt;&lt;/div&gt;
  </code></pre>
  
  <p>please help me fix this.. maybe it's better to use a background image instead?</p>