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

        -----------html------------
<ul>
<li><img><p><span></span></p></li>
</ul>
<div class="sub-case-body">
      <ul class="clear">
      <a href=""><li><img src="images/linshi/case1.jpg" alt=""><p>一汽丰田深圳2014<span>2014-11-21</span></p></li></a>
        <a href=""><li class="icon"><img src="images/linshi/case2.jpg" alt=""><p>一汽丰田深圳2014<span>2014-11-21</span></p></li></a>
        <a href=""><li class="icon"><img src="images/linshi/case3.jpg" alt=""><p>一汽丰田深圳2014<span>2014-11-21</span></p></li></a>
        <a href=""><li class="icon"><img src="images/linshi/case4.jpg" alt=""><p>一汽丰田深圳2014<span>2014-11-21</span></p></li></a>
    </ul>
</div>




-----------变灰的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;}