<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Examples</title>
<style>
*{padding: 0; margin: 0;}
figure img{transition:all 0.35s;}
figure figcaption p,figure figcaption div{transition:all 0.35s;}
figure{
position:relative;
float: left;
overflow: hidden;
height: 350px;
33.33%;
}
figcaption{
position: absolute;
top: 0;
left: 0;
color: #fff;
font-family: "微软雅黑";
}
figure img:hover{
transform: translate(-150px,0);
opacity: 0.5;
}
.one figcaption p{ text-align: center; background:#fff; color: #333; margin-top: 3px; transform:translate(-200px,0);}
.one:hover figcaption p{transform:translate(0,0);}
.one:hover figcaption p:nth-of-type(1){transition-delay:0.15s;}
.one:hover figcaption p:nth-of-type(2){transition-delay:0.3s;}
.one:hover figcaption p:nth-of-type(3){transition-delay:0.35s;}
.two figcaption p{ text-align: center; color: #fff; margin-top: 30px; transform:translate(0,0);}
.two:hover figcaption p{
transform:translate(80px,0);
}
.two figcaption div{position: absolute; border: 2px solid #fff; }
.two figcaption div.border1{400px; height: 0%; top:50px; left: 10%; border-top: none; border-bottom: none;}
.two figcaption div.border2{ 0%; height: 80%; top: 50px; left: 50%; border-left: none; border-right: none;}
.two:hover figcaption div.border1{ height: 80%; top:50px;}
.two:hover figcaption div.border2{ 400px; left:10%;}
</style>
</head>
<body>
<figure class="one">
<img src="img/1.jpg"/>
<figcaption>
<h1>我是标题</h1>
<p>我是标题1</p>
<p>我是标题2</p>
<p>我是标题3</p>
</figcaption>
</figure>
<figure class="two">
<img src="img/2.jpg"/>
<figcaption>
<h1>我是标题</h1>
<p>我是文字</p>
<div class="border1"></div>
<div class="border2"></div>
</figcaption>
</figure>
<script src="js/jquery.min.js"></script>
<!--<![endif]-->
<script>
</script>
</body>
</html>