Show element on hover another using css
<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>