栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

图片鼠标效果加播放图标

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

图片鼠标效果加播放图标





图片鼠标效果加播放图标

*{
margin:0;
padding:0px;
list-style:none;
}
.content{
width:1190px;
margin:auto;
}
.img-out{
width:273px;
height:158px;
border:1px solid #e5e5e6;
position:relative;
margin:0 20px;
float:left;
margin-top:20%;
box-shadow:0px 1px 4px rgba(154,154,154,1);
}
.img-out a{
display:block
}
.img-out img{
width:273px;
height:158px;
}

.img-out::before{
content:"";
position:absolute;
z-index:1;
top:0%;
width:273px;
height:158px;
bottom:0;
background:rgba(0,0,0,0.3)}
.img-out:hover::before{
background:none;
z-index:-1;
}
.img-out::after{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}

/播放图标/
.video-icon{
width:50px;
height:50px;
position:absolute;
top:32%;
left:40%;
z-index:10;
background:rgba(0,0,0,0.6);
border-radius:4px;
box-shadow:0px 0px 10px rgba(154,154,154,1);
}
.video-icon span{
display:block;
width:0px;
height:0px;
border-width:13px;
border-radius:3px;
margin:11px 0 0 20px;
border-style:solid;
border-color:rgba(154,154,154,0) rgba(154,154,154,0) rgba(154,154,154,0) rgba(255,255,255,0.8);
}
.img-out:hover .video-icon span{
border-color:rgba(154,154,154,0) rgba(154,154,154,0) rgba(154,154,154,0) rgba(255,255,255,1);
}




  • http://www.zhizaoyun.com/" target="_blank">



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/243578.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号