jquery - DIV オーバーレイ JQuery を使用したフェードイン

Question

このウェブサイトのように、オーバーレイを div 内に含めようとしています。JQueryを介して、ホバー時に応答性の高いフェードインを実現しようとしています。

http://www.unheap.com/

<div class="col-md-3">
    <div class="tile-item">
       <div class="tile-head text-center bg-red">
           <div class="tile-head-overlay text-center">
               <button class="btn btn-default btn-xs">New</button>
               <button class="btn btn-default btn-xs">View History</button>
           </div>
           <h1><span class="glyphicon glyphicon-calendar"></span></h1>                        
       </div>
       <div class="tile-content">
           ...
       </div>
     </div>
</div>

CSS

.tile-head-overlay {
  /*display:hidden;*/
  position: relative;
  width: 100%;
  height:100%;
  z-index: 10000;
  background-color: #403D3C;
}

この設定では、トップ div 全体をカバーしていないようです。また、これを JQuery 経由で呼び出す方法もわかりません。私が知っているのは、Hover() を介して Jquery の FadeToggle() 関数を使用する必要があるということだけです。

誰かが私を正しい方向に向けることができますか?

ありがとうございました！