前言：自从写博客开始，这次快一个月没有更博了，说忙也不是因为忙，不管怎么，今天总算是又开始了。最近在写一个项目，所以又学到一些小特效，今天就简单的总结下。我们平时进入一个网站，扫过一个图片有时就会看到，图片出现文字，然后图片变得灰暗，或者图片变得高亮。两个其实都是一个原理，我们可以用透明度opacity和层级z-index，这两个属性来设置。
一。实现过程：
（1）定义一个大的div，在里面包含一个div和一个img
（2）将小div设置为绝对定位，img为相对定位
（3）让img的大小为100%，即大div的大小，小div的大小与img相等
（4）给小div加上背景色，开始透明度为自己设置一个0到1之间的数即可，当鼠标扫过时透明度设为0，即完全透明
二。代码如下：
（1）html代码：
<div class="card"><div class="before"></div><img src="images/6.jpg"></div>
（2）主要的css代码：
.card{height:200px;margin:0 auto;width:230px;}.card:hover{cursor:pointer; }.card img{height:200px;width:100%;}.before{height:200px;width:230px;position:absolute;z-index:999;background:#282f44; opacity: 0.3;}.before:hover{background:#282f44; opacity: 0;}
三。效果如图：
以上实现的过程很简单，如果要改变图片的大小或者是在图片上加文字，都是这个思路，在鼠标扫过图片时，改变图片的大小，或显示原来隐藏的div即可，如果有更好的办法，欢迎来提意见。
如果觉得《鼠标移过图片变高亮》对你有帮助，请点赞、收藏，并留下你的观点哦！
