Image filter rollover effect

by Ryan Archer

HTML

<div>
    <img src="http://i415.photobucket.com/albums/pp236/Keefers_/Keffers%20Animals/evilmonkey.jpg" />
</div>

CSS

img {
      /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .5s ease-in-out;
    }

    img:hover {
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.01);
    }