Hoverover img = group img grayscale + background color
by Ken Watanabe
HTML
<body>
<img class="group1" src="http://i67.tinypic.com/30lhzk5.jpg"/>
<img class="group1" src="http://i67.tinypic.com/30lhzk5.jpg"/>
<img class="group2" src="http://i67.tinypic.com/vwv139.jpg"/>
<img class="group2" src="http://i67.tinypic.com/vwv139.jpg"/>
</body>CSS
* { margin:0; padding:0; }
body { background:black; width:100%; height:100%; }
img { width:200px; height:auto; float:left; display:block; padding:20px; -webkit-filter: grayscale(100%); filter: grayscale(100%); }
img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
img.group1:hover + body { background:red; }
img.group2:hover + body { background:blue; }