console
<body>
<figure class="test1">
<img src="http://ww1.sinaimg.cn/mw690/006qf0pNgy1fg2av4sn63j311y0lc76v.jpg" alt="img1" />
<figcaption>
<h2>
图片标题
</h2>
<p>
图片注释1
</p>
<p>
图片注释2
</p>
<p>
图片注释3
</p>
</figcaption>
</figure>
<figure class="test2">
<img src="http://ww1.sinaimg.cn/large/006qf0pNgy1fg2bl8mmjej311y0lcq3u.jpg" alt="img2" />
<figcaption>
<h2>
图片标题
</h2>
<p>
图片注释1
</p>
<p>
图片注释2
</p>
<p>
图片注释3
</p>
<div></div>
</figcaption>
</figure>
<figure class="test3">
<img src="http://ww1.sinaimg.cn/large/006qf0pNgy1fg2bmdf764j311y0lcwqx.jpg" alt="img3" />
<figcaption>
<h2>
图片标题
</h2>
<p>
图片注释1
</p>
<p>
图片注释2
</p>
<p>
图片注释3
</p>
</figcaption>
</figure>
<figure class="test4">
<img src="http://ww1.sinaimg.cn/large/006qf0pNgy1fg3n3q9nsoj311y0lcan0.jpg" alt="img2" />
<figcaption>
<h2>
图片标题
</h2>
<p>
图片注释1
</p>
<p>
图片注释2
</p>
<p>
图片注释3
</p>
<div></div>
</figcaption>
</figure>
</body>
body,figure,figcaption,h2,p,img{margin:0;padding:0;}
figure{position:relative;width:33.33%;max-height:200px;float:left}
figcaption {position:absolute;top:10px;left:10px;color:#fff;font-family:"微软雅黑"}
img{max-width:100%;max-height:100%;}
@media screen and (min-width:1001px){
figure{width:33.33%}
}
@media screen and (min-width:600px) and (max-width:1000px){
figure{width:50%}
}
@media screen and (max-width:600px){
figure{width:100%}
}
figure img{opacity:0.8;transition:all 0.3s;}
figure figcaption p{transition:all 0.3s;}
figure figcaption div{transition:all 0.5s;}
.test1{background-color:#eee;hsla(10%,10%,0.5,60%);}
.test1 figcaption p{background:#fff;color:#333;margin:3px;text-align:center;transform:translate(-130px,0px);}
.test1 figcaption{padding:20px}
.test1:hover figcaption p{transform:translate(0,0);}
.test1 figcaption p:nth-of-type(1){transition-delay:0.2s}
.test1 figcaption p:nth-of-type(2){transition-delay:0.3s}
.test1 figcaption p:nth-of-type(3){transition-delay:0.4s}
.test1:hover img{transform:translate(-5px,0);opacity:0.5;}
.test2{background:#ccc;}
.test2 figcaption{width:100%;height:100%;}
.test2 figcaption h2{margin:10% 0 0 10%;}
.test2 figcaption p{margin-left:10%;transform:translation(50px,0);opacity:0;}
.test2 figcaption div{border:2px solid #fff;width:80%;height:80%;position:absoulte;top:10%;left:20%;transform:translate(0,-520px) rotate(0deg);opacity:0;}
.test2:hover figcaption div {transform:translate(40px,-140px) rotate(360deg);opacity:1;}
.test2:hover img{opacity:0.5;}
.test2:hover figcaption p{transform:translate(0px,0px);opacity:1;}
.test3{background:#ccc}
.test3 figcaption{top:30%;left:15%;}
.test3:hover img{opacity:0.5;}
.test3 figcaption p{transform:skew(90deg);}
.test3 figcaption p:nth-of-type(1){transition-delay:0.2s;}
.test3 figcaption p:nth-of-type(2){transition-delay:0.3s;}
.test3 figcaption p:nth-of-type(3){transition-delay:0.4s;}
.test3:hover figcaption p{transform:skew(0deg);}
.test4{background:#eee;}
.test4 figcaption h2{margin-top:10%;margin-left:15%;}
.test4 figcaption p{margin-left:15%;}
.test4 figcaption{width:100%;height:100%;}
.test4 figcaption div{border:2px solid #fff;width:80%;height:80%;position:absoulte;top:10%;left:20%;transform:scale(1.5,1.5);opacity:0;}
.test4:hover figcaption div{transform:scale(1,1);opacity:1;margin-top:-120px;margin-left:50px;}
.test4:hover img{transform:scale(1.1,1.1);opacity:0.5;}