【メモ】hoverで画像の上に文字

検索した１番目に持ってた記事で動かず、
2番目のものもうまくいかなかったので
今後自分がまた使えるように軽まとめ。

--- HTML ---

<div class="hover-effect">
 <img src="images/four.png">
 <div class="mask">
   <p class="caption">文字</p>
 </div>
</div>

--- CSS ---

.hover-effect {
　overflow:　hidden;
　position:　relative;
}
.hover-effect .caption {
　text-align:　left;
　padding: 10px;
  color:　#fff;
  font-size: .85em;
  display: table-cell;
  vertical-align: middle;
}
.hover-effect .mask {
　width:　100%;
　height:　100%;
　position:　absolute;
　top:　0;
　left:　0;
　opacity:　0;
　background-color:　rgba(0, 0, 0, 0.728);
  display: table;
}
.hover-effect:hover .mask {
　opacity:　1;
}

maskをhoverで表示させる感じ。