SOURCE

<figure class="test1">
	<img style="width:100%;height:100%;" src="http://i4.buimg.com/567571/749d5cddfe51d201.jpg" alt="photo1" />
	<figcaption>
		<h3>图片标题1</h3>
		<p>图片说明1</p>
    <p>动画1</p>
	</figcaption>
</figure>

<figure class="test2">
	<img style="width:100%;height:100%;" src="http://i4.buimg.com/567571/d4fb543b76c1b4e4.jpg" alt="photo1" />
	<figcaption>
		<h3>图片标题2</h3>
		<p>图片说明2</p>
    <p>动画2</p>
	</figcaption>
</figure>

<figure class="test3">
	<img style="width:100%;height:100%;" src="http://i4.buimg.com/567571/8ba37e49a9c44cb4.jpg" alt="photo1" />
	<figcaption>
		<h3>图片标题3</h3>
		<p>图片说明3</p>
    <p>动画3</p>
	</figcaption>
</figure>

<figure>
	<img style="width:100%;height:100%;"  src="http://i1.piimg.com/567571/ddf267aa3038f23f.jpg" alt="photo1" />
	<figcaption>
		<h3>图片标题4</h3>
		<p>图片说明4</p>
    <p>动画4</p>
	</figcaption>
</figure>

body,figure,figcaption,h3,p,img{margin:0;padding:0;}
figure{position:relative;width:33.33%;overflow:hidden;height:250px;float:left;}
figcaption{position:absolute;top:0px;left:0px;color=#FFF;font-family:"微软雅黑";}
figure img{opacity:0.8}
figure ficaption p{transition:all 0.35s}
@media screen and (min-width:1001px){
  figure{width:33.33%}
}
@media screen and (max-width:600px){
  figure{width:100%}
}
@media screen and (min-width:601px) and (max-width:1000px){
  figure{width:50%}
}
.test1{background-color:#2f0000}
figure img{opacity:0.8}
.test1 ficaption p{background:#fff;color:#333;margin:3px;text-align:center;transform:translate(-100px,0px);-webkit-transform: translate(120px,0px);}
.test1 ficaption  p:nth-of-type(1){transition-delay:0.05s}
.test1 ficaption  p:nth-of-type(2){transition-delay:0.1s}
.test1 ficaption  p:nth-of-type(3){transition-delay:0.15s}
.test ficaption{padding:20px}
.test1:hover figcation p{transform:translate(0px,0px)}