html中hover的text-,html - Text flickers on hover CSS - Stack Overflow

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.

Html:

EXAMPLE	EXAMPLE	EXAMPLE
EXAMPLE		EXAMPLE
Serving St. Catharines and Niagara Region

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%;

}