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