利用伪元素给图片在鼠标悬停的时候添加背景图片，这种效果在电影网站上使用的比较频繁，主要是鼠标悬停的时候显示出播放的图标，点击图片链接后就会进入视频详情页面，而使用伪元素是为了使我们的html代码更加简洁。
要点：
1.需要使用绝对定位和相对定位，确定背景图片的位置,父级盒子设置为绝对定位，伪元素背景图片设置为相对定位。
2.背景图片的宽高要和父级盒子的宽高一致。
3.背景图片在默认情况下不显示，需要用display属性将其设置为none，当鼠标悬停的时候再让其显示出来，鼠标悬停时将其display属性设置为block。
以下是利用伪元素给图片在鼠标悬停的时候添加背景图片的详细代码：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.img {
position: relative;
margin: 30px auto;
width: 260px;
}
.img::before{
content: '';
display: none;
position: absolute;
height:100%;
width: 100%;
background:rgba(0,0,0,.2) url("img/icon.png") no-repeat center;
}
.img img{
width: 100%;
height: auto;
border-radius:5px;
padding: 10px;
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
.img:hover::before{
display: block;
}
</style>
</head>
<body>
<div class="img">
<img src="img/3.jpg" alt="">
</div>
</body>
</html>
以上就简单实现了利用伪元素给图片在鼠标悬停时添加背景图片，另外我们可以给用CSS3的过渡元素给背景图片添加添加一个过渡效果，让视觉效果更加舒适。