title: Show element on hover another using css
body: <p>I'm working on a tiny css action which based on A element hover, will display another element. The code is pretty basic:</p>
  
  <pre><code>&lt;a title="#" class="portfolio-reaction" href="#"&gt;
  &lt;img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" /&gt;
  &lt;div class="headline-overlay"&gt;LOREM IPSUM&lt;/div&gt;
  &lt;/a&gt;
  
  .portfolio-reaction {
    width:250px;
    height:250px;
    display:block;
  }
  
  .headline-overlay {
      background:none;
      height:100%;
      width:100%;
      display:none;
      position:absolute;
      top:10%;
      z-index:999;
      text-align:left;
      padding-left:0.5em;
      font-weight:bold;
      font-size:1.3em;
      color:#000;
  }
  .attachment-grid-feat:hover ~ .headline-overlay {
      display:block;
  }
  </code></pre>
  
  <p>and jsfiddle: <a href="https://jsfiddle.net/yL231zsk/1/" rel="nofollow">https://jsfiddle.net/yL231zsk/1/</a></p>
  
  <p>This solution works in 99%. The missing percent is the effect - while moving mouse arrow through the button, text is blinking. I have no idea why. Secondly - what if I want to extend number of appearing elements from 1 to 3. So to have: </p>
  
  <pre><code>&lt;a title="#" class="portfolio-reaction" href="#"&gt;
  &lt;img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" /&gt;
  &lt;div class="headline-overlay"&gt;
    &lt;p class="element-1"&gt;abc&lt;/p&gt;
    &lt;p class="element-2"&gt;111&lt;/p&gt;
    &lt;div class="element-3"&gt;X&lt;/div&gt;
  &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Thank you for any tips and advices.</p>