懸停圖像時，css淡入淡出文本塊？

Question

所以這是我的代碼，並且當您懸停圖像時，我正在尋找使用css3轉換來淡入文本和背景顏色。我已經嘗試了很多選擇器和過渡類型，但似乎無法得到它的任何幫助，不勝感激。

看到演示下面

http://jsfiddle.net/jiceb/xsFmA/

<a href="#"> 
     <h2>Some Text</h2> 
     <img src="http://www.sheridanrogers.com.au/wp-content/uploads/2011/03/American-pancakes.jpg"/> 
</a> 

和CSS

a { position: relative; display: inline-block } 

a img { 
    width:250px; 
} 

a h2 { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: 0; 
    background: black; 
    color: #fff; 
} 

a:hover h2 { 
    display: block; 
} 

Answer 1

而不是使用display:none和display:block，只需使用opacity並添加transition您a h2選擇：

a h2 { 
    opacity:0; /* Completely invisible. */ 
    transition:1s; /* A 1 second transition. */ 
} 

a:hover h2 { 
    opacity:1; /* Completely visible. */ 
} 

這會導致不透明度在1秒內從0增加到1。

JSFiddle demo。