Shine effect in pure CSS

HTML

<div class="mask pseudo"> <a href="http://css3create.com">
    <img src="https://imgur.com/orioa1n" alt="CSS3Create logo" />
  </a>

</div>
<p>Just over hover the logo. Enjoy.</p>
<p>Next demo: <a href="http://codepen.io/iamvdo/pen/xECmI" target="_blank">Progressive blur with CSS & SVG masks</a>
</p>
<svg height="0">
    <!-- THE mask -->
    <mask id="mask-firefox">
        <image width="150" height="64" xlink:href="https://imgur.com/orioa1n" filter="url(#filter)" />
    </mask>
    <!-- the filter to make the image white -->
    <filter id="filter">
        <feFlood flood-color="white" />
        <feComposite in2="SourceAlpha" operator="in" />
    </filter>
</svg>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway);
html{
  font: .9em 'Raleway',sans-serif;
  height: 100%;
  text-align: center;
  background: radial-gradient(50% 0,rgba(255,255,255,.3),rgba(255,255,255,0)), deepskyblue;
  color: rgba(0,0,0,.6);
}
p a{
  color: rgba(0,0,0,.6);
}
.mask a{
  position: relative;
  display:block;
  width:150px;
  height: 64px;
  text-align:center;
  margin: 50px auto;
  background: ;
  -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
}
.mask a{
  background-position: -140px 0;
  
}
.mask a:hover,
.mask a:focus{
  background-position: 10px 0;
  /*change speed to see in slow motion*/
  transition: all 1s;
}
.mask a::after{
  content:'';
  position: absolute;
  pointer-events: none;
  top:0; left:0; right:0; bottom: 0;
  background: radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background: radial-gradient(circle farthest-side at 0 0, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background-position: inherit; 
  -webkit-mask: url('http://dev.iamvdo.me/newLogoCSS3create2.png') center;
  mask: url('#mask-firefox');
}