Text not disappearing properly - html

Question

CSS
#articlebottom {
width: 980px;
height: 250px;
}
.products{
width:980px;
margin:0px auto;
padding-left:20px;
}
#articlebottom .imgWrap {
width:295px;
height:200px;
position:relative;
float:left;
margin:10px;
background:#333;
}
#articlebottom .imgWrap img {
position:absolute;
left:5px;
top:5px;
width:285px;
height:190px;
}
#articlebottom .imgDescription1 {
position: absolute;
left:0;
letter-spacing: 2px;
background-color: rgba(255, 250, 250, 0.2);
color: rgba(255, 250, 250, 0.2);
font-weight:bold;
font-size:18pt;
line-height: 50px;
width:100%;
height:50px;
opacity: 0;
text-align:center;
text-transform:uppercase;
transition:opacity 500ms ease-in-out, color 20ms ease-in-out,height 500ms ease-in-out;
}
#articlebottom .imgWrap:hover .imgDescription1 {
opacity: 1;
height:200px;
line-height:200px;
color: #1b9bff;
}
HTML
<article id="articlebottom">
<div class="products">
<div class="imgWrap">
<a href="Products/Camphor.aspx" target="_blank"><img src="Images/Camphor_b.JPG" alt="polaroid" />
<p class="imgDescription1">Camphor</p></a>
</div>
</div>
</article>
Fiddle
What I'm having:
The Text appears on the center when i hover and going to top after hover
What i need:
When i hover on the image the appropriate text shoould appear on the center and also need to disappear on center of the image itself

Answer 1

Updated Fiddle
The crucial part is moving
height:200px;
line-height:200px;
color: #1b9bff;
From:
#articlebottom .imgWrap:hover .imgDescription1
To:
#articlebottom .imgDescription1
Otherwise the position of the text is set to a default/inherited value and only set to centred on hover, hence why the hover state sees it jump.