如何在照片上方放置叠加层？

Question

我正在尝试让重叠显示在照片的顶部而不是在它下面。这是指向我的测试页的链接 - http://kaniamea.com/image.htm 如何正确定位并同时响应？ 这是代码：

<div align="center">
<div class="image-container"> <a href="link"><img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/activities/oahu_dinner.jpg" height="174" width="231">
  <div class="after">This is some content</div>
  </a> </div>
<div class="image-container"> <a href="link"><img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/activities/oahu_dinner.jpg" height="174" width="231">
  <div class="after">This is some content</div>
  </a> </div>
<div class="image-container"> <a href="link"><img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/activities/oahu_dinner.jpg" height="174" width="231">
  <div class="after">This is some content</div>
  </a> </div>
<style>

.image-container {
    width:230px;
    height:200px;
    display:inline-block;
    vertical-align:top;
    margin-top:4px;
}

.image-container .after {
    width:230px;
    height:200px;
    display:inline-block;
    vertical-align:top;
    margin-top:4px;
    position:absolute;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

</style>