如何使用CSS创建图像标题和图像叠加层？

本质上，我正在尝试重新创建以下项目（悬停在右侧的图像上）：

这是以下网站的屏幕截图：https : //www.loungelizard.com/有很多问题只涉及创建图像叠加层或图像标题，所以我想我会混合使用他们两个的版本。

这是我到目前为止的代码：

HTML：

 <a href="#" class="desc_ImageOverlay">
    <img src="http://www.imagesource.com/Doc/IS0/Media/Home2/5/8/7/8/IS09AR776.jpg" class="img-responsive" alt="" />
    <div class="desc">
        <p class="desc_content">Test</p>
    </div>
    <span class="OverlayText">
      <p> 
        This is some new test text. 
      </p>  
    </span>
</a>

CSS：

 div.desc{
     bottom: 50%;
     color: #fff;
     left: 50%;
     position: absolute;
     width: 100%;
}

.desc_content{
     color: orange;
     shadow:  text-shadow: 2px 2px 5px black;
     font-size:  20px;
}

.desc_ImageOverlay {
      width:140px;
      text-decoration:none;
      position:relative;
      display:block;
      border:1px solid #666;
      padding:3px;
      margin-right:5px;
      float:left;
}

.desc_ImageOverlay span.OverlayText {
        visibility:hidden;
        position:absolute;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
}

desc_ImageOverlay:hover span.OverlayText{
        visibility:visible;
}

任何帮助实现与本网站相同结果的帮助将不胜感激。这是我当前使用的Codepen。