<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: gainsboro;
}
.out {
margin:10px;
width: 200px;
height: 200px;
background-color: cadetblue;
padding-top: 20px;
display: block;
float: left;
}
.out h2, .out p {
opacity: 0;
transition: all 0.2s linear;
}
.out h2.hh {
width: 100%;
height: 20px;
background-color: antiquewhite;
transform: translateY(-100px);
font-size: 16px;
padding-top: 2px;
padding-bottom: 2px;
}
.out p.pp {
width: 100%;
height: 120px;
overflow: hidden;
background-color: aquamarine;
transform: translateY(100px);
margin-top: 50px;
}
.out:hover h2, .out:hover p {
opacity: 1;
transform: translateY(0px);
}
</style>
</head>
<body>
<div class="out">
<h2 class="hh">head ...</h2>
<p class="pp"> info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,</p>
</div>
<div class="out">
<h2 class="hh">head ...</h2>
<p class="pp"> info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,</p>
</div>
<div class="out">
<h2 class="hh">head ...</h2>
<p class="pp"> info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,</p>
</div>
<div class="out">
<h2 class="hh">head ...</h2>
<p class="pp"> info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,</p>
</div>
</body>
</html>
没有加兼容各种现代浏览器的 前缀，再谷歌浏览器可以正确查看