DIV overlay使用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（）函数

有人能指出我正确的方向吗？

谢谢！