Group hover over state
HTML
<div class="green">
<img src="http://i67.tinypic.com/2433fok.jpg"/>
<img src="http://i67.tinypic.com/2433fok.jpg"/>
<img src="http://i67.tinypic.com/2433fok.jpg"/>
</div>
<div class="red">
<img src="http://i65.tinypic.com/fy1ieq.jpg"/>
<img src="http://i65.tinypic.com/fy1ieq.jpg"/>
<img src="http://i65.tinypic.com/fy1ieq.jpg"/>
<img src="http://i65.tinypic.com/fy1ieq.jpg"/>
<img src="http://i65.tinypic.com/fy1ieq.jpg"/>
<img src="http://i65.tinypic.com/fy1ieq.jpg"/>
</div>
<div class="blue">
<img src="http://i65.tinypic.com/sz7mnp.jpg"/>
<img src="http://i65.tinypic.com/sz7mnp.jpg"/>
<img src="http://i65.tinypic.com/sz7mnp.jpg"/>
<img src="http://i65.tinypic.com/sz7mnp.jpg"/>
<img src="http://i65.tinypic.com/sz7mnp.jpg"/>
<img src="http://i65.tinypic.com/sz7mnp.jpg"/>
<img src="http://i65.tinypic.com/sz7mnp.jpg"/>
</div>
CSS
img {
position:relative;
display:block;
float:left;
width:auto;
height:200px;
-webkit-filter: brightness(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
div:hover img {
-webkit-filter: brightness(80%);
filter: grayscale(0%);
filter: gray;
}