基本信息

---

下载

   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

---

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

支付宝支付

微信支付

   源码介绍

---

【图片悬停遮罩效果】
【实例截图

】

【核心代码】

* { margin: 0; padding: 0; }
body { font-family: "Microsoft yahei", Arial; background: #eee; }
.box { width: 500px; height: 500px; margin: 50px auto; }
.box ul li { float: left; width: 190px; height: 190px; background: #979797; border: solid 10px #979797; margin: 10px; list-style: none; position: relative; overflow: hidden; }
.box ul li .cover a { width: 30px; height: 30px; background: #ffffff; display: block; border-radius: 50%; line-height: 30px; margin: 30px auto; }
.box ul li .cover a i { color: red; }
.box ul li .cover { width: 190px; height: 190px; background: rgba(255, 39, 42, 0.7); position: absolute; left: 0; top: 0; text-align: center; color: #ffffff; transform-origin: right bottom; -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transition: all 0.35s; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; }
.box ul li .cover p { margin-top: 10px; font-size: 14px; }
.box ul li:hover .cover { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); }