CodePen

HTML

            
              <span><img src="http://lorempixel.com/200/200" alt="colorized on hover" /></span>
<span><img src="http://lorempixel.com/200/200" alt="colorized on hover" /></span>
<span><img src="http://lorempixel.com/200/200" alt="colorized on hover" /></span>
<span><img src="http://lorempixel.com/200/200" alt="colorized on hover" /></span>
<span><img src="http://lorempixel.com/200/200" alt="colorized on hover" /></span>
<span><img src="http://lorempixel.com/200/200" alt="colorized on hover" /></span><span><img src="http://lorempixel.com/200/200" alt="colorized on hover" /></span>
<span><img src="http://lorempixel.com/200/200" alt="colorized on hover" /></span>
<span><img src="http://lorempixel.com/200/200" alt="colorized on hover" /></span>
<span><img src="http://lorempixel.com/200/200" alt="colorized on hover" /></span>
            
          
!

CSS

            
              html {display:table;height:100%;width:100%;}
body {display:table-cell;text-align:center;vertical-align:middle;}
span {display:inline-block;position:relative;}
img {vertical-align:top;}
span:before {content:'';position:absolute;top:10px;left:10px;right:10px;bottom:10px;background:inherit; }
span:hover:before {box-shadow:0 0 0 10px rgba(50,50,50,0.5);}
span:nth-child( 1n):hover { background-color :  rgba(155, 206,  53,0.5)}
span:nth-child( 2n):hover { background-color :  rgba(107,  91, 205,0.5)}
span:nth-child( 3n):hover { background-color :  rgba( 66, 224, 208,0.5)}
span:nth-child( 4n):hover { background-color :  rgba(171, 255,   2,0.5)}
span:nth-child( 5n):hover { background-color :  rgba(255, 166,   2,0.5)}
span:nth-child( 6n):hover { background-color :  rgba(218, 114, 214,0.5)}
span:nth-child( 7n):hover { background-color :  rgba(255, 99,  71,0.5)}
span:nth-child( 8n):hover { background-color :  rgba(206, 135,  66,0.5)}
span:nth-child( 9n):hover { background-color :  rgba(255, 215,   1,0.5)}
span:nth-child(10n):hover { background-color :  rgba(50, 50, 50,0.5)}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................