悬停图像时，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。