Text flickers on hover CSS - html

Question

When hovering over the image to prompt the text to appear, the text and banner flutter once you put the mouse over it. How can this be prevented.
Any help would be appreciated thanks.
Here's the sample. http://jsfiddle.net/a3mcmbby/
Html:
<div id="container-content">
<div id="design-background">
</div>
<div id="content">
<div id="table-content">
<table align="center">
<tbody>
<tr>
<td colspan="2" valign="bottom" style="font-family:ralewayregular; color: rgb(37,37,37); font-size: 110%; line-height: 150%;">
</td>
<td><img src="/images/layout/layoutImg6.png" alt="" width="310" height="182">
</td>
</tr>
<tr>
<td>
<img src="/images/layout/layoutImg4.jpg" alt="" width="304" height="194">
<h3>EXAMPLE</h3>
</td>
<td rowspan="2">
<img src="/images/layout/layoutImg5.jpg" alt="" width="311" height="406">
<h3>EXAMPLE</h3>
</td>
<td>
<img src="/images/layout/layoutImg1.jpg" alt="" width="308" height="195">
<h3>EXAMPLE</h3>
</td>
</tr>
<tr>
<td>
<img src="/images/layout/layoutImg3.jpg" alt="" width="304" height="195">
<h3>EXAMPLE</h3>
</td>
<td>
<img src="/images/layout/layoutImg2.jpg" alt="" width="308" height="195">
<h3>EXAMPLE</h3>
</td>
</tr>
<tr>
<td colspan="3" style="text-align:center; font-family: Semibold; color: rgb(165,97,11); font-size:300%;">Serving St. Catharines and Niagara Region</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
#container-content{
position:relative;
margin: 0 auto;
width:100%;
min-height:700px;
background-color:#FFF;
}
#design-background{
position:absolute;
height:350px;
top:50%;
left:0px;
right:0px;
margin-top: -145px;
background: url('../images/background-dec.jpg');
}
#content{
position:relative;
margin: 0 auto;
left:0;
right:0;
width:980px;
}
#table-content{
position:absolute;
margin-top:-30px;
}
#table-content table tr td{
position: relative;
padding:8px;
}
#table-content table tr td h3{
display:none;
}
#table-content table tr td a:hover + h3{
color:#FFF;
display:block;
position: absolute;
z-index:10;
margin: auto;
top:0;
bottom:0;
left:8px;
right:10px;
font-family: ralewayregular;
height:50px;
background-color: rgba(0,0,0,0.7);
text-align: center;
padding-top:25px;
font-size: 200%;
}
http://jsfiddle.net/a3mcmbby/

Answer 1

try this
#table-content table tr td:hover h3{ #do something ... }

Answer 2

In your HTML, nest h3 within a, then adjust your CSS accordingly.
As it is now, h3 is being placed over top of the a tag when the a tag is hovered over. This prevents hovering from working so the hover status is removed. Then, it picks up the cursor hovering again because it is no longer covered - continuing in an endless loop.

Answer 3

When you display the h3, it is intercepting the hover in the underlying element, so it is no longer hovered. Then h3 is not displayed, the underlying element is hovered again , and so on
set
#table-content table tr td h3 {
pointer-events: none;
}
to avoid it
fiddle