-
实现效果
-
html页面
<body>
<div class="box">
<div class="item">
<div class="hover">
hello
</div>
</div>
<div class="item">
<div class="hover">
hello
</div>
</div>
<div class="item">
<div class="hover">
hello
</div>
</div>
<div class="item">
<div class="hover">
hello
</div>
</div>
<div class="item">
<div class="hover">
hello
</div>
</div>
</div>
</body>
- css页面
<style>
.box {
height: 200px;
}
.item {
position: relative;
float: left;
width: 200px;
height: 200px;
margin: 20px 40px;
border: 1px solid #ccc;
overflow: hidden;
}
.hover {
position: absolute;
left: 0;
bottom: 0;
width: 200px;
height: 45px;
background: gold;
opacity: .6;
transform: translateY(45px);
transition: ease-out .3s;
}
.item:hover .hover{
transform: translateY(0);
}
</style>