图片鼠标效果加播放图标

*{
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">