好吧,这真的很棘手,关键是使用翻译并注意标题高度:
http://jsfiddle.net/coma/vzvXf/17/
HTML
<ul class="peeks">
<li>
<div>
<div>
<div class="title">
<h3>Title</h3>
<h4>Subtitle</h4>
</div>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
</div>
</div>
</div>
</li>
<li>
<div>
<div>
<div class="title">
<h3>Title</h3>
<h4>Subtitle</h4>
</div>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
<p>Test peek test peek<br/>Test peek</p>
<p>Test peek test peek<br/>Test peek</p>
<p>Test peek test peek<br/>Test peek</p>
<p>Test peek test peek<br/>Test peek</p>
<p>Test peek test peek<br/>Test peek</p>
<p>Test peek test peek<br/>Test peek</p>
<p>Test peek test peek<br/>Test peek</p>
</div>
</div>
</div>
</li>
</ul>
CSS
ul.peeks {
list-style: none;
padding: 0;
margin: 0;
}
ul.peeks:after {
content: "";
clear: both;
}
ul.peeks > li {
width: 300px;
border: 10px solid orange;
margin: 0 5px 5px 0;
float: left;
background-color: orange;
color: #fff;
overflow: hidden;
}
ul.peeks > li.large {
width: 600px;
}
ul.peeks > li > div {
padding: 75px 10px 10px 10px;
background-color: red;
position: relative;
}
ul.peeks > li > div:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 10px;
background-color: red;
}
ul.peeks > li > div > div {
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
-moz-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s
}
ul.peeks > li:hover > div > div {
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0)
}
ul.peeks div.title {
height: 0;
position: relative;
top: -65px;
}
ul.peeks h3 {
font-size: 30px;
line-height: 1em;
margin: 0;
}
ul.peeks h4 {
font-size: 20px;
line-height: 1em;
margin: 5px 0 10px 0;
}
ul.peeks div.peek {
padding: 10px;
background-color: green;
}