演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
.box{
width: 300px;height: 250px;
margin: 100px auto;
border-radius: 10px;overflow: hidden;
box-shadow: 0 0 3px 3px #ccc;
}
.box img{
width: 300px;height: 220px;
}
span{
line-height: 30px;
padding-left: 10px;
display: inline-block;
transition: transform 200ms;
}
.box:hover span{
/* 对行级元素没有效果 */
transform: translateX(30px);
color: #0000ff;
}
</style>
</head>
<body>
<div class="box">
<img src="bj.jpg" >
<span>我要自学，我准备好位移了！</span>
</div>
</body>
</html>
