CSSトランジション：ホバー：なし

Question

を働いていない移行しない理由を把握することはできませんだから、アイデアはいくつかのテキストとそのブロックが上見えるはずです。 ノンホバー状態のexepectとして機能しています（テキストを隠していると思われるrgba）

私はallとdisplayの両方のプロパティを試しました。また、h3やpのようなすべての要素にトランジションを追加しようとしました。

あなたが不透明のための移行を使用しますが、表示できない https://jsfiddle.net/dyrc522f/

<div class="photo photo2">Some title 
       <div class="photobl photobl2"> 
        <h3>Some title</h3> 
        <p>text</p> 
       </div> 
      </div> 

CSS

.photo{ 
    width: 244px; 
    height: 219px; 
    float: left; 
    color: #fff; 
    position: relative; 
    font-size: 23px; 
    font-weight: 700; 
    text-align: center; 
    padding-top: 180px; 
    -webkit-transition:all .4s ease; 
    -moz-transition:all .4s ease; 
    -ms-transition:all .4s ease; 
    transition: all .4s ease; 

    background-color: tomato;/**/ 
    } 
.photo:hover{ 
    color: rgba(0, 0, 0, 0); 
} 
.photo:hover .photobl{ 
    display: block; 
} 
.photobl{ 
    display: none; 
    width: 244px; 
    height: 399px; 
    position: absolute; 
    background: rgba(0, 0, 0, 0.5) url('../images/logomin.png') center 40px no-repeat; 
    top: 0; 
    -webkit-transition: display .4s ease; 
    -moz-transition: display .4s ease; 
    -ms-transition: display .4s ease; 
    transition: display .4s ease; 
    } 
.photobl h3{ 
    font-size: 23px; 
    font-weight: 700; 
    color: #ffcc00; 
    padding-top: 181px; 
    padding-bottom: 30px; 
    } 
.photobl p{ 
    font-size: 16px; 
    font-weight: 300; 
    color: #fff; 
    line-height: 1.3; 
    } 

Answer 1

をご覧ください。素晴らしい、完全な答えはここにあります：CSS3 transition doesn't work with display property