The code is ready but I want the image to get colored (i.e. remove grayscale property of IMG) on mouse hover and when the mouse is out the image should get grayscale again.
If it is not possible only by css. javascript is also ok but please no jquery, I don't know jquery.
The code is below:
<style type="text/css"> #ajabox:hover #ajainner{ height:100px; top:-100px; } #ajainner{ width:332px; overflow:hidden; height:0px; background-image:url(../../images/bg_black_50.png); position:relative; top:-1px; transition: top .4s ease-in, height .4s ease-in; -ms-transition: top .4s ease-in, height .4s ease-in; -webkit-transition: top .4s ease-in, height .4s ease-in; -o-transition: top .4s ease-in, height .4s ease-in; -moz-transition: top .4s ease-in, height .4s ease-in; } #ajabox{ width:332px; margin:0px; padding:0px; border:0px; height:209px display:-webkit-box; display:box; display:-moz-box; display:-ms-box; display:-o-box; overflow:hidden; } span{ color:#FFF; font-family:Verdana, Geneva, sans-serif; left:10px; top:10px; position:relative; } img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(desaturate.svg#greyscale); -webkit-filter: grayscale(1); filter: gray; } </style> <script type="text/javascript"> </script> <body bgcolor="#000000"> <div id="ajabox"> <img src="http://fc03.deviantart.net/fs70/f/2011/123/c/9/adam_jensen__s_army_____________by_gtanmay-d3fh5pw.png" style="width:332px;" class="desaturate"/> <div id="ajainner"> <span>Adam Jensen's Army</span> <br /> <span style="font-size:12px">Made from the CD cover of "Assassin's Creed: Brotherhood"<br />Feat. Adam Jensen(Deus Ex: Human Revolution)</span> </div> </div> 
