title: color desaturated image on hover and desaturate again on mouse out html5 css3
body: <p>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.</p>
  
  <p>If it is not possible only by css. javascript is also ok but please no jquery, I don't know jquery.</p>
  
  <p>The code is below:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  #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;
  }
  
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  &lt;/script&gt;
  &lt;body bgcolor="#000000"&gt;
  &lt;div id="ajabox"&gt;
      &lt;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"/&gt;
      &lt;div id="ajainner"&gt;
          &lt;span&gt;Adam Jensen's Army&lt;/span&gt;
          &lt;br /&gt;
          &lt;span style="font-size:12px"&gt;Made from the CD cover of "Assassin's Creed: Brotherhood"&lt;br /&gt;Feat. Adam Jensen(Deus Ex: Human Revolution)&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>