JSFiddle - React, Tailwind, and code Playground

by ShockFamily

HTML

<div class="DemoContainer">
CSS3 ANIMATED SHINE EFFECT
<div class="image_shine">
   <img src="http://www.wordpressthemeshock.com/banners/banner_10_themeshock.jpg" />
 <div class="hover_shine"></div>
</div>
<div>

CSS

.DemoContainer {
    margin: 20px;
    width: 580px;
    color: #ccc;
    font-weight: bold;
    font-family: tahoma;
    text-align: center;
}
.image_shine{
    width:  200px;
    height: 200px;
    margin: 30px auto;
    position: relative;
    border: 2px solid #666;
}
.hover_shine{
    width:100%; height: 100%; 
    background-image: url(http://i.minus.com/iuvzYDPlYu8RR.png);
    position: absolute;
    /*initial position*/
    background-position: -265px 0; 
    left:0px; top:0px; 
    background-repeat:no-repeat;
    /*css transition*/
    -webkit-transition: background-position .3s ease;
       -moz-transition: background-position .3s ease;
         -o-transition: background-position .3s ease;
            transition: background-position .3s ease;
}
.hover_shine:hover{
    /*Final position*/
    background-position: 10px 0;
}