<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标滑过内容上移</title>
<style>
ul,li,i,div,h3,p,label{margin: 0;padding: 0;}
.ul1 li{position:relative;width: 250px;height: 200px;list-style: none;overflow: hidden;box-shadow:0 5px 10px rgba(0, 0, 0, 0.0980392);color:#93999f;cursor: pointer;border-radius: 5px;}
.ul1 i{display:block;width: 250px;height: 150px;background: #bce8f1;}
.ul1 div{width: 250px;height: 144px;}
.ul1 div .label1{position: absolute;top:130px;background: white;transition: all 0.5s;}
.ul1 li:hover{box-shadow:0 5px 20px rgba(0, 0, 0, 0.298039); }
.ul1 li:hover .label1{top:100px;}
.ul1 div h3{font-size: 14px;margin-top: 33px;color: #444;}
.ul1 div p{height: 40px;font-size: 12px;}
.ul1 .label2{position: absolute;width: 250px;bottom: 0;height: 20px; background: white;}
.color-red{color: red;}
.r{float: right}
</style>
</head>
<body>
<ul class="ul1">
<li>
<i></i>
<div>
<label class="label1">
<h3> 组件方式开发 Web App全站 </h3>
<p> 用HTML5/CSS3/JS流行技术，以组件式开发WebApp全站。</p>
</label>
<label class="label2">
<span class="l color-red">￥78.00</span>
<span class="r">1878人在学</span>
</label>
</div>
</li>
</ul>
</body>
</html>
