css样式添加遮罩

2018-01-11 12:50:30来源:网络收集作者:管理员人点击

分享

阿里云爆款

借鉴地址:“http://blog.csdn.net/sinat_31016743/article/details/53522677”


原理:利用css样式实现鼠标移入加一层遮罩的效果。将遮罩层absolute定位到要添加遮罩层的上面,鼠标移入让他显示。


代码片:
html:



Huskie


introduction introduction introduction


like it?hate it?buy it!

CSS


.ai_demo{width: 250px; height: 250px; background:url("http://www.magpet.cn/images/upload/Image/87076179_snap(25).jpg")no-repeat scroll 0 0/100% 100% content-box content-box; background:url("http://www.magpet.cn/images/upload/Image/87076179_snap(25).jpg") 50% 50% /9;position: relative;}
.ai_demo .btn{ padding: 225px 0 0 80px; text-align: right; position: relative;z-index: 999;}
.ai_demo .btn > a{ line-height: 22px; padding:3px 5px; margin-right: 1px; color: #fff; background: #84654e; font-size: 12px; text-decoration: none;}
.ai_demo div.price{ display: none;}
.ai_demo:hoverdiv.price > .content{padding-top:70px; text-align: center;}
.ai_demo:hoverdiv.price > .content p.price,.ai_demo:hoverdiv.price > .content p.intro{ color: #fff; padding: 0 5%; font-size: 24px;}
.ai_demo:hoverdiv.price > .content p.intro{ font-size: 14px;}
.ai_demo:hoverdiv.price{ width: 100%; height: 250px; display: block; background: #000; opacity: .5; -moz-opacity: .5; filter:alpha(opacity=50); position: absolute; top: 0; left: 0;}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台