点击前画面：
image.png
鼠标移动进来的画面：
image.png
素材：
image
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
height: 225px;
width: 400px;
background-color: #00FF00;
margin: 20px auto;
}
img {
width: 100%;
}
#zheZhao{
display: none;
position: absolute;
top: 0;
left: 0;
height: 225px;
width: 400px;
background-color: rgba(0,0,0,0.5);
/* 还可以插入一张背景图:播放按钮 */
background-image: url(播放按钮.png);
/* 指定只显示一次背景图像： */
background-repeat: no-repeat;
background-position:center;
}
.box:hover #zheZhao{
display: block;
}
<body>
<div class="box">
<div id="zheZhao"></div>
<img src="视频画面.jpg" alt="">
</div>
</body>
