<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<style type="text/css">
*{padding: 0;margin: 0}
body{
background-color:#fff;
color:#555;
font-family:'Avenir Next','Lantinghei SC';
font-size: 14px;
-webkit-font-smoothing:antialiased;
}
.wrap{
width:100%;
height:600px;
position:absolute;
top:50%;
margin-top:-300px;
background-color:#333;
overflow:hidden;
}
.photo{
width: 260px;
height: 320px;
position: absolute;
z-index: 1;
box-shadow: 0 0 1px rgba(0,0,0,.01);
}
.photo .side{
width: 100%;
height:100%;
background-color: #eee;
position: absolute;
top:0;
right: 0;
padding: 20px;
}
.photo .side-front{}
.photo .side-front .image{
width: 100%;
height: 250px;
line-height: 250px;
overflow: hidden;
}
.photo .side-front .image img{
width: 100%;
}
.photo .side-front .caption{
text-align: center;
font-size: 16px;
line-height: 50px;
}
.photo .side-back{display: none;}
</style>
<body>
<div class="wrap">
<div class="photo">
<div class="side sdie-front">
<p class="image"><img src="015.jpg"/></p>
<p class="caption">骑行</p>
</div>
<div class="side side-back">
<p class="desc">描述信息</p>
</div>
</div>
</div>
</body>
</html>
.photo .side-back{display: none;}这么写是不对的 改成.photo， .side-back{display: none;}
没看到你哪里有代码要把图片隐藏起来呀，只有把描述信息给隐藏起来的代码。