CSS轉換不再工作

Question

所以我試圖把一個圖像塊懸停，但這次，即時試圖把一個圖像和一個段落在中間，但仍然過渡不工作，不知道爲什麼！ ？

這是HTML：

 <div class="area"> 
      <div class="mask"> 
      <div class="vertical-align"> 
       <img src="http://placehold.it/50x50"> 
       <p>Play Now</p> 
      </div> 
      </div> 
     <img src="http://placehold.it/300x300" alt="video"> 
     </div> 

     <h2>Title</h2> 
     <p>Paragraph</p> 

     </div> 

這是CSS

.video { 
    width:300px; 
} 

.area:hover .mask{ 
    display: block; 
    width: 300px; 
    height: 300px; 
    cursor: pointer; 
    transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    -ms-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -webkit-transition: all 0.3s ease-in-out; 
     background-color: rgba(226,23,37,0.9); 
     text-align: center;} 

.vertical-align{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
} 

.mask{ 
    position: absolute; 
    display: none; 
} 

Answer 1

使用opacity: 0到opacity: 1而不是display: none和block。您無法使用transition作爲不可數財產。

JSFiddle