html部分：
<li class="featureBox">
<div class="bigbox">
<a href="#"><img src="${imgUrl}" width="300px" height="250px" />
<div class="titlebox">
<i></i>   
<div class="titleboxtext">
<h3>顯示出來的部分</h3>
<p>隱藏的部分，在一個盒子裡，把一部分內容隱藏掉，在滑鼠懸停到div時，就會把隱藏的部分向上顯示出來。</p>
</div>
</div>
</a>
</div>

</li>
css部分：
.featureBox{
width:300px;
color: #eee;
font-size: 14px;
line-height: 23px;
text-align: center;
overflow: visible;
    background-repeat: no-repeat;
    border-style: dotted;
    float:right; 
    margin-right:15px;
}
.featureBox a{
position: relative;
}
.bigbox{
overflow: hidden;
}
.titlebox{
bottom: 4px;
width: 280px;
height: 27px;
left: 0;
line-height: 27px;
overflow: hidden;
padding: 0px 10px 0;
position: absolute;
transition: all 0.4s ease 0s;
}
.titlebox i{
background: #000 none repeat scroll 0 0;
height: 73px;
left: 0;
opacity: 0.7;
position: absolute;
top: 0;
width: 300px;
z-index: 1;
}
.titleboxtext{
color: #eee;
font-size: 12px;
line-height: 21px;
position: absolute;
text-align: left;
z-index: 100;
}
.titleboxtext h3{
color: #eee;
font-size: 14px;
line-height: 23px;
text-align: center
}
 .bigbox:hover .titlebox{
height:70px;
transition:all .4s;-moz-transition: all .4s;-webkit-transition: all .4s;-o-transition: all .4s
}
.article-list li .bigbox a{
POSITION: relative
}