CSS轉換不能用於懸停

Question

我遇到問題。當我將鼠標懸停在圖像上時，會出現黑色疊加層，但CSS Transition屬性無法處理它。

下面是HTML：

<div class="col-md-12"> 
    <div class="collection-category"> 
     <img src="http://dummyimage.com/600x400/#C1C1C1/fff" /> 
     <a href="#"> 
      <div class="overlay_wrap"> 
       <div class="overlay"> 
        <h2 class="collection_title">Headline One</h2> 
       </div> 
      </div> 
     </a> 
    </div> 
</div> 

和CSS是：

.collection-category { 
    display: block; 
    overflow: hidden; 
    margin: 10px 0; 
    position: relative; 
} 

.collection-category img { 
    width: 100%; 
    max-height: 250px; 
} 

.collection_title { 
    display: table-cell; 
    vertical-align: middle; 
    font-size: 28px; 
} 

.overlay_wrap { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 

    -moz-transition: all .2s ease-in-out; 
    -webkit-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out;  
} 
.overlay { 
    display: none; 
    background: rgba(2, 2, 2, 0.61); 
    color: #FFF; 
    text-align: center; 
    -moz-transition: all .2s ease-in-out; 
    -webkit-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out;  
} 
.collection-category:hover>a>.overlay_wrap>.overlay { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

這裏是的jsfiddle

http://jsfiddle.net/cnbvoe32/

任何幫助將高度讚賞。

在此先感謝。

Answer 1

這是因爲你不能從display: none轉換到display: table。

相反，你可以用opacity: 0沿設定初始顯示table，然後過渡到opacity: 1過渡opacity屬性：

Updated Example

.overlay { 
    display: table; 
    background: rgba(2, 2, 2, 0.61); 
    color: #FFF; 
    text-align: center; 
    -moz-transition: all .2s ease-in-out; 
    -webkit-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
    opacity: 0; 
    height: 100%; 
    width: 100%; 
} 
.collection-category:hover>a>.overlay_wrap>.overlay { 
    opacity: 1; 
}