console
<body>
<figure class="wrapper">
<img class="lazy" src="http://ww1.sinaimg.cn/large/006qf0pNgy1fgzuna7v3jj30b406e3ym.jpg" style="display:block;width:500px;height:350px;">
<ficaption>
<p><img src="http://www.aseoe.com/images/toutiao/ico6.png" /></p>
</ficaption>
</figure>
</body>
*{
margin:0;
padding:0;
}
body{
background:#eee;
}
figure{
position:relative;
z-index:1;
display:inline-block;
overflow:hidden;
text-align:center;
cursor:pointer;
margin:0 auto;
}
figure img{
position:relative;
display:block;
opacity:1;
text-align:center;
margin:0 auto;
vertical-align:middle;
}
figure ficaption::after,figure ficaption::before{
pointer-events:none;
}
.figure ficaption{
position:absolute;
top:50%;
left:50%;
width:100%;
}
ficaption,*::after,*::before{
box-sizing:boreder-box;
}
.wrapper{
position:abdolute;
left:50%;
height:50%;
overflow:hidden;
background:rgba(238,71,71,.7);
height:auto;
width:500px;
height:350px;
text-align:center;
transform：translate(-50%,-50%);
margin-left:-30%;
margin-top:3%;
}
.wrapper a img{
opacity:1;
-webkit-transition:opacity .35s;
}
.wrapper:hover img{
opacity:.5;
}
.wrapper:hover p img{
opacity:1;
text-align:center;
vertical-align:center;
}
.wrapper ficaption::after,.wrapper ficaption::before{
position:absolute;
top:30px;
right:30px;
bottom:30px;
left:30px;
content:"";
opacity:0;
-webkit-transition:opacity .35s,-webkit-transform .35s;
transition:opacity .35s,transform .35s;
}
.wrapper ficaption::before{
border-top:1px solid #fff;
border-bottom:1px solid #fff;
-webkit-transform:scale(0,1);
transform:scale(0,1);
}
.wrapper ficaption::after{
border-right:1px solid #fff;
border-left:1px solid #fff;
-webkit-transform:scale(1,0);
transform:scale(1,0);
}
.wrapper p{
opacity:0;
position:absolute;
left:50%;
top:50%;
text-align:center;
-webkit-transform:opacity .35s,-webkit-transform .35s;
transform:opacity .35s,transform .35s;
-webkit-transform:translate3d(0,20px,0);
transform:translate3d(0,20px,0);
}
.wrapper:hover ficaption::after,.wrapper:hover ficaption::before{
opacity:1;
-webkit-transform:scale(1);
transform:scale(1);
}
.wrapper:hover p{
opacity:1;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}