盾牌案例
2018-04-26 本文已影响0人
琪33
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.items {
width: 1250px;
height: 320px;
padding-left: 20px;
margin: 80px auto;
}
.item {
width: 230px;
height: 300px;
text-align: center;
margin-right: 20px;
background-color: #FFF;
float: left;
position: relative;
top: 0;
overflow: hidden;
transition: all .5s;
}
.pic {
margin-top: 30px;
}
.desc {
position: absolute;
bottom: -100px;
width: 100%;
height: 100px;
background-color: #ff6700;
transition: all .5s;
}
.item:hover {
top: -5px;
box-shadow: 0 0 15px #AAA;
}
.item:hover .desc {
bottom: 0;
}
</style>
</head>
<body>
<div class="items">
<div class="item">
<img src="./images/1.jpg" alt="">
</div>
<div class="item">
<div class="pic">
<img src="./images/2.jpg" alt="">
</div>
<div class="desc"></div>
</div>
<div class="item">
<div class="pic">
<img src="./images/3.jpg" alt="">
</div>
<div class="desc"></div>
</div>
<div class="item">
<div class="pic">
<img src="./images/4.jpg" alt="">
</div>
<div class="desc"></div>
</div>
<div class="item">
<div class="pic">
<img src="./images/5.jpg" alt="">
</div>
<div class="desc"></div>
</div>
</div>
