方法：刚开始隐藏内容，鼠标放上去改变定位的bottom的值，主要用了定位和隐藏
```
<div class="box">
<span class="bottom"></span>
</div>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #ccc;
overflow: hidden;//隐藏下面的内容
position: relative;
margin:50px auto;
top:0;
}
.box .bottom{
position: absolute;
left: 0;
bottom: -85px;//将内容置于下方
width: 100%;
background-color: orange;
height: 60px;
transition: all .5s;
}
.box:hover {
top: -5px;
box-shadow: 0 0 15px #AAA;
}
.box:hover .bottom{
bottom: 0px;//鼠标放上去，显示下面的内容
}
</style>
```
**刚开始：隐藏**
**鼠标放上去：显示**
