求前端大神， demo 如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="applicable-device"content="pc,mobile"/>
</head>
<body>
<style>
body,figure,img,figcaption{padding:0px;margin:0px;}
figure{position:relative;width:33.33%;overflow:hidden;height:350px;float:left;}
figcaption{position:absolute;bottom:0px;left:0px;}
figcaption h1{font-family:"黑体";color:white;margin-left:40px}
img{opacity:0.9;transition:all 0.35s;}
figcaption p{background-color:white;width:90px;text-align:center;font-family:"微软雅黑";margin-left:50px;transform:translate(-150px,0px);
}
figure figcaption p{transition:all 0.35s;}
figure:hover p{transform:translate(0px,0px)}
figcaption p:nth-of-type(1){transition-delay:0.05s}
figcaption p:nth-of-type(2){transition-delay:0.1s}
figcaption p:nth-of-type(3){transition-delay:0.15s}
figure img{transform:translate(-50px,0px)}
figure:hover img{transform:translate(0px,0px);opacity:0.6}
@
media screen and (max-widh:600px){
figure{width:100%}
}
@
media screen and (min-width:601px) and (max-widh:1000px){
figure{width:50%}
}
@
media screen and (min-widh:1001px){
figure{width:33.33%}
}
</style>
<div class="weather">
<figure>
<img src="boracay-island-picture-galleries.jpg"/>
<figcaption>
<h1>你好，世界！</h1>
<p>关于 DEV</p>
<p>关于 PM</p>
<p>关于全栈</p>
</figcaption>
</figure>
<figure>
<img src="288206704-jpg.jpg"/>
<figcaption>
<h1>你好，世界！</h1>
<p>关于 DEV</p>
<p>关于 PM</p>
<p>关于全栈</p>
</figcaption>
</figure>
<figure>
<img src="Nick-Simpson----Forth-Road-and-Forth-Rail-Bridges-xxlarge.jpg"/>
<figcaption>
<h1>你好，世界！</h1>
<p>关于 DEV</p>
<p>关于 PM</p>
<p>关于全栈</p>
</figcaption>
</figure>
</div>
</body>
</html>
这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。
https://www.v2ex.com/t/356468
V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.