这是一个很简单的效果，简单的记录一下代码，先看效果图。
<!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-transition: -moz-transform 0.2s;
transition: transform 0.2s;
}
.cbp-ig-grid .cbp-ig-category {
text-transform: uppercase;
display: inline-block;
font-size: 1em;
letter-spacing: 1px;
color: #fff;
-webkit-transform: translateY(10px);
-moz-transform: -moz-translateY(10px);
-ms-transform: -ms-translateY(10px);
transform: translateY(10px);
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
-webkit-transition: transform 0.3s, opacity 0.2s;
}
.cbp-ig-grid li:hover .cbp-ig-category,
.touch .cbp-ig-grid li .cbp-ig-category {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.cbp-ig-grid .cbp-ig-details {
margin-top: 25px;
padding: 5px;
border: 1px solid #FFFFFF;
display: inline-block;
font-size: 1em;
letter-spacing: 1px;
color: #fff;
-webkit-transform: translateY(10px);
-moz-transform: -moz-translateY(10px);
-ms-transform: -ms-translateY(10px);
transform: translateY(10px);
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
-webkit-transition: transform 0.3s, opacity 0.2s;
}
.cbp-ig-grid li:hover .cbp-ig-details,
.touch .cbp-ig-grid li .cbp-ig-details {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
/* Hover styles */
.cbp-ig-grid li>a:hover {
background: #47a3da;
}
.cbp-ig-grid li>a:hover .cbp-ig-title {
color: #fff;
}
.cbp-ig-grid li>a:hover .cbp-ig-title {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
.cbp-ig-grid li>a:hover .cbp-ig-img {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<ul class="cbp-ig-grid">
<li style="background: url(https://img.alicdn.com/tps/TB16hkwLXXXXXX6XXXXXXXXXXXX-576-840.jpg) no-repeat">
<a href="#">
<span>
<img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
</span>
<h3 class="cbp-ig-title">学校定位解决方案</h3>
<span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发，剖析秒杀、视频直播等场景</span>
<span class="cbp-ig-details">查看详情</span>
</a>
</li>
<li style="background:url(https://img.alicdn.com/tps/TB19Jz6LXXXXXacaXXXXXXXXXXX-576-840.jpg) no-repeat">
<a href="#">
<span>
<img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
</span>
<h3 class="cbp-ig-title">学校定位解决方案</h3>
<span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发，剖析秒杀、视频直播等场景</span>
<span class="cbp-ig-details">查看详情</span>
</a>
</li>
<li style="background:url(https://img.alicdn.com/tps/TB1dDT4LXXXXXabaXXXXXXXXXXX-576-840.jpg) no-repeat">
<a href="#">
<span>
<img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
</span>
<h3 class="cbp-ig-title">学校定位解决方案</h3>
<span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发，剖析秒杀、视频直播等场景</span>
<span class="cbp-ig-details">查看详情</span>
</a>
</li>
<li style="background:url(https://img.alicdn.com/tps/TB1PVwkLXXXXXagXFXXXXXXXXXX-576-840.jpg) no-repeat">
<a href="#">
<span>
<img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
</span>
<h3 class="cbp-ig-title">学校定位解决方案</h3>
<span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发，剖析秒杀、视频直播等场景</span>
<span class="cbp-ig-details">查看详情</span>
</a>
</li>
<li style="background:url(https://img.alicdn.com/tps/TB1erQpLXXXXXa7XpXXXXXXXXXX-576-840.jpg) no-repeat">
<a href="#">
<span>
<img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
</span>
<h3 class="cbp-ig-title">学校定位解决方案</h3>
<span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发，剖析秒杀、视频直播等场景</span>
<span class="cbp-ig-details">查看详情</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。
网友评论