Merhabalar, bu yazımda CSS3 ile üzerine gelince parlayan resim yapımını göstereceğim. Öncellikle yapımı çok kolay.Aşağıda anlattığım adımları sırasıyla uyguladığınız zaman çalışır vaziyette olacaktır. İlk olarak Html dosyamız içinde yapacağımız işlemleri yapalım.

 <div class="parlaklik"></div>

olarak animasyonu uygulamak istediğimiz div etiketini oluşturalım.Etiketimizi oluşturduktan sonra ise görselimizi belirleyelim

<div class="parlaklik"><img src="gorsellink.png"/></div>

Görselimizi atadıktan sonra ise Csslerimizide ekleyelim.

div.parlaklik {
    width: 450px;
    height: 400px;
    overflow: hidden;
  position: relative;
}
 
div.parlaklik::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);
}
 
div.parlaklik:hover::before {
    -webkit-animation: parlak .75s;
    animation: shine .75s;
}

Csslerimizide ekledikten sonra animasyonlarımızıda ekleyerke işlemimizi bitirelim.

@-webkit-keyframes parlak {
    100% {
        left: 125%;
    }
}
@keyframes parlak {
    100% {
        left: 125%;
    }
}

Kaynak:AdobeWordpress