Black and White Rollover

by Chris LaFrombois

HTML

<img src=http://upload.wikimedia.org/wikipedia/zh/3/34/Lenna.jpg alt="Lena Söderberg full color" title="Lena Söderberg full color" style="float:left">

CSS

img { 
  width: 300px;
  height:300px;
}


img:hover{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}