SOURCE

<div class="box">
  <div class="imgBox">
    <img src="http://pic1.qqtn.com/qqtn/mb/up/2016-8/2016080112073273547_360_360.jpg" alt="" />
    <div class="font">
      图片名1
    </div>
  </div>
  <div class="imgBox">
    <img src="http://img.besoo.com/file/201705/07/0839451745908.png" alt="" />
    <div class="font">
      图片名2
    </div>
  </div>
  <div class="imgBox">
    <img src="http://img.zcool.cn/community/010c7658019904a84a0e282bd31989.jpg" alt="" />
    <div class="font">
      图片名3
    </div>
  </div>

</div>

*{
  padding:0;
  margin:0;
}
html,body{
  width:100%;
  height:100%;
}
.box{
  width:100%;
  /* background:Red; */
}
.box .imgBox{
  display:inline-block;
  width:300px;
  height:300px;
  margin:10px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.box .imgBox:before{
 content: "";
 display: block;
 border: 30px solid rgba(255, 255, 255, 0.3);
 position: absolute;
 top: 5px;
 left: 5px;
 bottom: 5px;
 right: 5px; 
/* opacity: 1; */
 z-index: 2;
 transition: all 1s ease 0s;
}
.box .imgBox:after{
  content:"";
  display:block;
  border:10px solid #fff;
  position:absolute;
  top:35px;
  left: 35px;
  bottom: 35px;
  right: 35px;
  opacity:1;
  z-index:1;
  transition:all 0.3s ease 0s;
}
.box .imgBox:hover:before{
  border:1px solid rgba(255, 255, 255,0.18);
}
.box .imgBox:hover:after{
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
}
.box .imgBox img{
  width:100%;
  transform:scale(1.1);
}
.box .imgBox .font{
  position:absolute;
  left:0;
  bottom:30px;
  z-index:2;
  display:block;
  width:100%;
  text-align:center;
  height:60px;
  color:#fff;
  font-size:28px;
  opacity:0;
  transition: all 0.3s ease 0s;
}
.box .imgBox:hover .font{
  bottom:0;
  opacity:1;
}