申請css過渡到ID？

Question

即時通訊嘗試使顯示之間的平滑過渡：無;財產，然後相同的財產，但顯示我想我幾乎希望它褪色？沒有使用JS。

我寫了這個隱藏了所有的冠軍的時候不要懸停在圖片：

#title-0 
{ 
display:none; 
-o-transition:all 0.5s linear; 
-ms-transition:all 0.5s linear; 
-moz-transition:all 0.5s linear; 
-webkit-transition:all 0.5s linear; 
transition:all 0.5s linear; 
} 

和徘徊的時候我寫了這個，顯示標題：

#portfolio-0:hover > #title-0 {display:block;} 

但效果當懸停只是靜態和即時

我欣賞所有的幫助，謝謝！

Answer 1

不能過渡的顯示屬性，如果我知道你想達到什麼樣正確的，它可以用不透明來完成：

#title-0 
{ 
opacity: 0; 
-o-transition:opacity 0.5s linear; 
-ms-transition:opacity 0.5s linear; 
-moz-transition:opacity 0.5s linear; 
-webkit-transition:opacity 0.5s linear; 
transition:opacity 0.5s linear; 
} 

#portfolio-0:hover > #title-0 {display:block;} 

Answer 2

你不能這樣做在顯示屬性過渡。您可以#title-0的不透明度設置爲0代替：

#title-0 
{ 
    -o-transition:all 0.5s linear; 
    -ms-transition:all 0.5s linear; 
    -moz-transition:all 0.5s linear; 
    -webkit-transition:all 0.5s linear; 
    transition:all 0.5s linear; 
    opacity: 0; 
} 

然後恢復不透明度爲1上的#portfolio-0懸停：

#portfolio-0:hover > #title-0 {opacity: 1} 

Fiddle Demo

Answer 3

下面是使用不透明工作示例。還增加所需的情況下的高度過渡：http://jsfiddle.net/Ty2nm/1/

#title-0 { 
    height: 0; 
    opacity: 0; 
    -o-transition:all 0.5s linear; 
    -ms-transition:all 0.5s linear; 
    -moz-transition:all 0.5s linear; 
    -webkit-transition:all 0.5s linear; 
    transition:all 0.5s linear; 
    overflow: hidden; 
} 
#portfolio-0:hover > #title-0 { 
    height: 20px; 
    opacity: 1; 
}