这是一个很简单的效果,简单的记录一下代码,先看效果图。
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.cbp-ig-grid {
list-style: none;
padding: 0 0 50px 0;
margin: 0;
}
.cbp-ig-grid:after {
clear: both;
}
.cbp-ig-grid li {
width: 20%;
float: left;
height: 370px;
text-align: center;
border-top: 1px solid #ddd;
}
.cbp-ig-grid li>a {
display: block;
height: 100%;
color: #ffffff;
background: #000000;
opacity: 0.7;
text-decoration: none;
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
transition: background 0.2s;
}
.cbp-ig-grid .cbp-ig-img {
margin: 20px 0 10px 0;
padding: 20px 0 0 0;
width: 80px;
height: 80px;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
}
.cbp-ig-grid .cbp-ig-title {
margin: 20px 0 10px 0;
padding: 20px 0 0 0;
-webkit-transition: -webkit-transform 0.2s;
-moz-trans