图片变灰色,且鼠标移上有透明背景移入

        -----------html------------

     

     
• 

  一汽丰田深圳20142014-11-21


       
• 

  一汽丰田深圳20142014-11-21


       
• 

  一汽丰田深圳20142014-11-21


       
• 

  一汽丰田深圳20142014-11-21


   

-----------变灰的css---------------
.icon{
transition-duration:2s; //过渡花费的时间
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
filter: grayscale(100%);
filter: #000;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
.icon:hover{
transition-duration:2s;
filter: none;
-webkit-filter: grayscale(0%);
}


-----------透明背景移入的css---------------------
.sub-case-body{max-width:1120px; width:96%;padding:48px 2% 13px 2.1%;}
.sub-case-body li{float:left;width:32.85%; height:auto; position:relative; overflow:hidden; margin:0 5px 5px 0;}
.sub-case-body img{width:100%; height:auto; font-variant:top;}
.sub-case-body p{display:none; width:91%;height:50%; margin:4% 0 0 4.5% ; background-color:rgba(246,81,81,0.8); text-align:center; color:#fdfcfe; font-size:18px; font-weight:bolder; position:absolute; left:0; top:0;padding-top:25%;animation-delay:0.2s;-webkit-animation-delay:0.2s;-moz-animation-delay:0.2s;-ms-animation-delay:0.2s;-o-animation-delay:0.2s;}
.sub-case-body p span{color:#f7eded; font-size:16px;display:block; font-weight:100;}