/*マウスオーバーで透過した背景を表示し、テキストも表示*/
.image_link{
 display:block; 
 position:relative;
 text-decoration:none;
}
.image_link img{
  display:block;
  width:100%;
}
.image_link:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:2;
  background:#000;/*好みの色に変えてください。*/
  opacity:0;
  transition:0.3s;
}
.image_link:after{
  content:"READ MORE";/*好みの文章に変更してください。*/
  display:block;
  color:#fff;
  line-height:48px;
  width:180px;/*箱の横幅*/
  border:solid 1px #fff;
  border-radius:5px;
  text-align:center;
  position:absolute;
  top:45%;/*箱の位置*/
  left:50%;
  margin-top:-1em;/*テキストの高さ*/
  margin-left:-90px;/*テキストの余白*/
  opacity:0;
  z-index:3;
  transition:0.3s;
  font-weight:bold;
  letter-spacing:0.2em;
}
.image_link:hover:before{
  opacity:0.5;
}
.image_link:hover:after{
  opacity:1;
  margin-top:-0.5em;
}