这是一个很简单的效果，简单的记录
<!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>
一下代码，先看效果图。
