html - イメージ オーバーレイに CSS3 トランジションを追加するにはどうすればよいですか?

Question

半透明の画像オーバーレイ (:hover に表示される) に CSS3 トランジション (容易さ) を与える方法を見つけようとしています。しかし、それは機能していません。何か不足しているためなのか、それともトランジションが表示プロパティで機能しないだけなのかはわかりません。CSS の回避策 (JavaScript はわかりません) のアイデアはありますか? 前もって感謝します。

関連する HTML と CSS:

<div class="thumbnail">
    <figure>
        <img src="images/dude.jpg" alt=""/>
    </figure>
    <div class="thumbnail-overlay">
        <h2>Project Name</h2>
        <h3> Skills Skills Skills</h3>
        <p>This is a project description.</p>
    </div>
</div>

.thumbnail {
   position:relative;
   float:left;
   width:40%;
   margin:1.5% 1.5% 0 0;
}

.thumbnail-overlay {
   background-color: @dark-gray;
   display:none;
   opacity:.9;
   position:absolute;
   top:0;
   left:0;
   width:100%; height:100%;
   overflow:hidden;
   -webkit-transition:all .3s ease;
   -moz-transition:all .3s ease;
   transition:all.3s ease;
}


.thumbnail:hover .thumbnail-overlay {
   display:block;
}