Создаем эффект блика при наведении

Увидел интересный эффект на одном сайте, но он, увы — был реализован на JS. Решил повторить на html+css

Попробуем создать эффект пробегающего, по картинке, блика не прибегая к JS
Данный пример — лишь демонстрация возможностей и потому работать будет только в webkit- браузерах. Для иных даже префиксы не задавал, ибо самоцель — «just for fun»

Для начала подготовим разметку

<div class ="logo">
    <div class="blick"></div>
    <img src="http://itstartuplabs.com/wp-content/themes/itstartuplabs/images/logo.png">
</div>

Ну тут все просто — div в котором лежит картинка и сам блок с «лучиком»

добавим стилей

спозиционируем нашу оберку:

.logo{
    position:relative;
    disply:inline-block;
    left:100px;
    top:100px;
    overflow:hidden
}

и div с «лучиком»

.blick{
    width:10px;
    height:100px;
    position:absolute;
    left:-40px;
    bottom:0;    
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 15%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 85%);
    background: -webkit-gradient(linear, left top, right top, color-stop(15%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(85%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 15%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 85%);
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 15%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 85%);
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 15%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 85%);
    background: linear-gradient(to right,  rgba(255,255,255,0) 15%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 85%);

     -webkit-transform: rotate(25deg);  
         -moz-transform: rotate(25deg);  
          -ms-transform: rotate(25deg);  
           -o-transform: rotate(25deg);  
              transform: rotate(25deg);  
}

Лучик прячем при помощи position:absolute смещая его за видимую область обертки. Для .logo задаем display:inline-block дабы ширина блока равнялась ширине содержимого.
Фон заливаем градиентом прозрачный-белый-прозрачный и поворачиваем div при помощи transform

теперь нам нужно добавить анимацию движения нашего лучика при наведении. Для этого описываем анимацию. Она весьма примитивна и заключается в изменении свойства left

@-webkit-keyframes 'move' {
    from {    
    left: -40px;
    }    
    to {    
    left: 90px;
    }   
}
@keyframes 'move' {
    from {    
    left: -40px;
    }    
    to {    
    left: 90px;
    }   
}

И задаем саму анимацию

.logo:hover .blick{
    -webkit-animation-name: 'move';
    -webkit-animation-duration: .8s;   
    animation-name: 'move';
    animation-duration: .8s;    
}

Посмотреть результат