Brillo

 

HTML

<div class="imagen_brillo"><img style="border: 0px solid #0033c7; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; -webkit-box-shadow: #000 3px 3px 9px; -moz-box-shadow: #000 3px 3px 9px; box-shadow: #000 3px 3px 9px;" src="http://file.mobilmusic.ru/f0/5a/62/664281.gif" alt="" width="200" height="200" />
<div class="hover_brillo" style="text-align: right;">&nbsp;</div></div>

CSS

.imagen_brillo{ width: 200px;height: 200px;
margin: 30px auto;position: relative;
 border: 1px dotted #666;
border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;}
 .hover_brillo{width:100%; height: 100%;
 background-image: url(http://1.bp.blogspot.com/-UQeeL-DK98A/T2zPfW2tpSI/AAAAAAAACjc/w1G3bjYHbzM/s1600/Hover%2Bbrillo.png);
border: 1px dotted #666; border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
position: absolute;background-position: -265px 0; left:0px; top:0px;
 background-repeat:no-repeat; 
-webkit-transition: background-position .3s ease; 
-moz-transition: background-position .3s ease;
 -o-transition: background-position .3s ease; transition: background-position .3s ease;}
 .hover_brillo:hover{ background-position: 10px 0;}