本文主要是介绍CSS电影海报特效（当鼠标移动到海报上时，海报颜色会变暗同时出现点击播放的按钮），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
当鼠标移动到海报上时，海报颜色会变暗同时出现点击播放的按钮
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box {position: relative;width: 212px;height: 120px;margin: 100px auto;}.box img {width: 212px;height: 120px;}/* 原来的盒子装有一个黑色半透明的盒子，刚开始是隐藏看不见的 */.mask {display: none;position: absolute;top: 0;left: 0;width: 212px;height: 120px;background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center center;}/* 当鼠标经过的时候，a里面的黑色半透明盒子的盒子就显示出来 */.box a:hover .mask {display: block;}</style>
</head>
<body><div class="box"><a href="#"><div class="mask"></div><img src="images/haizei.jpg"></a></div>
</body>
</html>
这篇关于CSS电影海报特效（当鼠标移动到海报上时，海报颜色会变暗同时出现点击播放的按钮）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
