CSS当鼠标移动在图片上发生颜色变化

       昨天做寒假任务时，在快做完时，结尾要用一个分享，之前学长发的网页里面是四种分享方式，当鼠标移动上去时图片发生了颜色变化，那种给人的感觉就很高大上了（不知道咋形容），当我查看网页的代码时，发现居然只用了一张图片，很神奇呀，这是原网页里面的图片，就这一张。。。。。

       emmm，有4个图标显示不明显，总之在这4个蓝色的图标下面还有4个白色的图标，（源网页是当我鼠标移动上去时会变成白色）

       我是用的自己的办法（其实是我做不来这种。(/▽＼)小声BB），咳咳。
那我说一下我自己的聪（sha）明（gua）方法。
       首先上原图，

       不要吐槽我扣的图片，下面是网页中的样子。鼠标没有移动上去的样子，

       这是我鼠标移动在悠上面的样子，

       其实这个挺简单的。不过要用到css里面的filter（滤镜），这里原图的css是用的。


       filter:grayscale(100%)

       然后如果要效果更加blingbling一点还可以变透明一点，用opacity（透明度），比如我这里原图的css是


       opacity：0.4


       意思就是透明度为40%，（主要是我的背景是黑色，效果就更好。）
       然后再给图片加一个hover，在hover里面图片的filter和opacity分别改为none（无滤镜）和1（不透明），就会有我的那个效果