如何放置一個過渡.5s緩解

Question

我有這個圖像，在懸停添加一個色調，並將文字放在它上面。我想添加transition: .5s ease;，但由於某種原因，它不起作用。繼承人jsfiddle任何想法如何做到這一點，我嘗試了所有我能想到的事情，並且我很難過，不知道該怎麼做。

任何幫助表示讚賞

感謝

.col-sm-6 { 
 
    min-height: 500px; 
 
    background: lightgrey; 
 
    text-align: center; 
 
} 
 

 
.image-wrap { 
 
    display: inline-block; 
 
    max-width: 100%; 
 
    position: relative; 
 
} 
 

 
.image-wrap .overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    color: white; 
 
    opacity: 1; 
 
    transition: display .5s ease; 
 
    display: none; 
 
} 
 

 
.image-wrap:hover .overlay { 
 
    display: block; 
 
} 
 

 
.red { 
 
    background: rgba(255, 0, 0, 0.5); 
 
} 
 

 
.blue { 
 
    background: rgba(0, 0, 255, 0.5); 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <a href="#" class="image-wrap"> 
 
     <img class="img-responsive" src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" /> 
 
     <div class="overlay red"> 
 
      <h3>Image Heading</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, tempore?</p> 
 
     </div> 
 
     </a> 
 
     <a href="#" class="image-wrap"> 
 
     <img class="img-responsive" src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" /> 
 
     <div class="overlay blue"> 
 
      <h3>Image Heading</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, tempore?</p> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

一些，需要小的改動代碼。基本上你不能動畫顯示，因此作爲一種解決方法，你可以用動畫的不透明度，你的覆蓋將始終爲0的透明度，當你徘徊的不透明度會更改爲1，與所需的動畫，如：

.image-wrap .overlay { 
    position: absolute; 
    top:0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    color:white; 
    opacity: 0; 
    transition: opacity .5s ease; 
} 

.image-wrap:hover .overlay { 
    opacity: 1; 
}