为了账号安全,请及时绑定邮箱和手机立即绑定

图片鼠标效果加播放图标

标签:
Html/CSS CSS3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片鼠标效果加播放图标</title>
<style>
*{
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);
}
</style>
</head>

<body>
<div class="content">
<ul>
<li><div class="img-out"><a href="http://www.zhizaoyun.com/" target="_blank"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://sns.zhizaoyun.com/images/listimg/img05.jpg" /></a>
<div class="video-icon"><span></span></div></div></li>

<li>
  <div class="img-out"><a href="http://www.zhizaoyun.com/" target="_blank"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://sns.zhizaoyun.com/images/listimg/img05.jpg" /></a>
  <div class="video-icon"><span></span></div></div></li>
<li>
  <div class="img-out"><a href="http://www.zhizaoyun.com/" target="_blank"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://sns.zhizaoyun.com/images/listimg/img05.jpg" /></a>
  <div class="video-icon"><span></span></div></div></li>

</ul>

</div>
</body>
</html>

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消