Currently, I am experimenting with a small CSS action that involves displaying another element when an A element is hovered over. The code I have so far is quite simple:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">LOREM IPSUM</div>
</a>
.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;
}
You can also view a working demo on jsfiddle here: https://jsfiddle.net/yL231zsk/1/
Although this solution works in most cases, there are a few issues I'm currently facing. Firstly, when moving the mouse cursor over the button, the text seems to blink and I'm not sure why that is happening. Secondly, I am looking to expand the number of elements that appear from just one to three. So the structure I want to achieve is as follows:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<p class="element-1">abc</p>
<p class="element-2">111</p>
<div class="element-3">X</div>
</div>
</a>
I would appreciate any tips or advice on resolving these issues. Thank you.