需求

净月投资热力图PC端涉及个列表图片，鼠标放上去之后图片变成有颜色的那种。
那就先要让它变成黑白的

代码如下

<img src="..." class="graypic" />
.graypic { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

示例

驻场管委会需要个悬停的效果：

.mouse_onshow{background:white;margin:0 5px;}
.mouse_onshow:hover{
    transform:translate(0,-10px);  
 　　-webkit-transform:translate(0,-10px);    
　　-moz-transform:translate(0,-10px);    
　　-o-transform:translate(0,-10px);    
　　-ms-transform:translate(0,-10px);
    box-shadow:0px 5px 20px #ccc;
}

1.鼠标悬停图片变大

:hover {

　　-webkit-transform: scale(1.1);

　　-moz-transform: scale(1.1);

　　-o-transform: scale(1.1);

　　-ms-transform: scale(1.1);

}

缓慢变化需要在包住图片的外层加上：-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;

变大不超出的话就加上overflow:hidden;

2.鼠标悬停整体旋转

:hover {

　　transform:rotate(360deg);

　　-webkit-transform:rotate(360deg);

　　-moz-transform:rotate(360deg);

　　-o-transform:rotate(360deg);

　　-ms-transform:rotate(360deg);

}

缓慢变化需要在包住图片的外层加上：transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;

3.鼠标悬停整体旋转放大

:hover {

　　transform:rotate(360deg) scale(1.2);

　　-webkit-transform:rotate(360deg) scale(1.2);

　　-moz-transform:rotate(360deg) scale(1.2);

　　-o-transform:rotate(360deg) scale(1.2);

　　-ms-transform:rotate(360deg) scale(1.2);

}

缓慢变化需要在包住图片的外层加上：transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;

4.鼠标悬停整体上升

:hover {

　　transform:translate(0,-10px);

　　-webkit-transform:translate(0,-10px);

　　-moz-transform:translate(0,-10px);

　　-o-transform:translate(0,-10px);

　　-ms-transform:translate(0,-10px);

}

缓慢变化需要在包住图片的外层加上：transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;

需要上升载加一点阴影(加在hover里面)：box-shadow:0px 5px 20px #ccc;