title: css transition not working for display: none
body: <p>Can't figure out why does transition not working</p>
  
  <p>So, the idea is that block with some text should be visible on :hover.
  It's working as exepect for the non-hover state (hiding the text thought rgba)</p>
  
  <p>I tried both all and display properties. Also I tried adding transitions to all elements, like h3 and p.</p>
  
  <p>Please visit 
  <a href="https://jsfiddle.net/dyrc522f/" rel="noreferrer">https://jsfiddle.net/dyrc522f/</a></p>
  
  <pre><code>&lt;div class="photo photo2"&gt;Some title
                  &lt;div class="photobl photobl2"&gt;
                      &lt;h3&gt;Some title&lt;/h3&gt;
                      &lt;p&gt;text&lt;/p&gt;
                  &lt;/div&gt; 
              &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.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;
      }
  </code></pre>