CSS image hover effects Shine

CSS image hover effects Shine

CSS image hover effects shine yang aku share, membuat efek mengkilap saat di sorot kursor,

ini contoh css & htmlnya.

<style type="text/css">
.hover14 {
 position: relative;
}
.hover14::before {
 position: absolute;
 top: 0;
 left: -75%;
 z-index: 2;
 display: block;
 content: '';
 width: 50%;
 height: 100%;
 background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 -webkit-transform: skewX(-25deg);
 transform: skewX(-25deg);
}
.hover14:hover::before {
 -webkit-animation: shine .75s;
 animation: shine .75s;
}
@-webkit-keyframes shine {
 100% {
  left: 125%;
 }
}
@keyframes shine {
 100% {
  left: 125%;
 }
}

</style>

<div class="hover14 img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigrWqauLgdYYBT-HDZ4UTHDxpmf6Yypm44uXm5cKorvk1SjgopMZr-j49HikDwNAEPkwVD8OHe5XTrA7UGCG-qvrcrniKxaq_f_jVrCx1c9b4SytHHbKHDjhJfzXEsrn-dMyPZhE3Edkuz/s320/b0d5b07584448fc325bbefbceabf22cb.jpg" />
</div>

DEMONYA:

Selamat mencoba.