文字不消失正確

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

什麼我有：

1. 文本顯示上，當我將鼠標懸停和去後懸停

頂部我需要什麼樣的中心：

1. 當我在圖像上懸停相應的文本shoould出現在中心也需要消失在圖像中心本身

Answer 1

Updated Fiddle

的關鍵部分是移動

height:200px; 
    line-height:200px; 
    color: #1b9bff; 

來源：

#articlebottom .imgWrap:hover .imgDescription1

要：

#articlebottom .imgDescription1

否則，文本的位置被設置爲缺省的/繼承的價值，只設置爲以懸停爲中心，因此懸停狀態爲什麼會發生跳躍。