CSS3 Animated Hover Effect For Images

Efek transisi adalah salah satu fitur CSS3 baru yang memungkinkan pengembang web untuk membuat efek hover  
antara dua elemen. Anda tidak dapat membayangkan seberapa efektif efek transisi, dan bagaimana pengunjung situs tertarik padanya, sampai Anda mengujinya dan menonton banyak desas-desus dari orang-orang yang meminta Anda melakukan hal itu.

DEMO

Dalam tutorial ini, kita akan membahas tentang bagaimana Anda dapat menerapkan latar belakang transparan putih sederhana yang akan mem-flash melalui gambar blog Anda di hover dalam waktu yang ditentukan. 

Markup HTML Kami akan menggunakan dua tag div, div pertama membungkus gambar utama yang ingin kita terapkan efek kilau, sedangkan div kedua membungkus tag efek kilau.

<div class = "image-shine">

    <img src = " IMAGE-URL " />

    <div class = "hover-shine"> </div>

</div>

Markup CSS
 Sekarang, kita akan membuat CSS untuk efek bersinar. Di mana lebar dan tinggi harus ditempatkan pada 100% dan efeknya akan mulai dari sudut kanan atas gambar. 

 .image-shine { 
    width: 250px; 
    tinggi: 250px; 
    posisi: relatif; 
} 
.hover-shine { 
    width: 100%; tinggi: 100%; 
    background-image: url (http://4.bp.blogspot.com/-33qEOAK6J1E/UknXiuquI4I/AAAAAAAAAEhA/ v50bvnMQ3T0 / s1600 / shine.png); 
    posisi: absolut; 
    / * Posicion inicial del shine * / 
    posisi latar belakang: -260px 0; 
    kiri: 0px; atas: 0px; 
    background-repeat: no-repeat; 
}

Kami menentukan -260px untuk posisi latar belakang bersinar ke kiri, untuk mencegahnya muncul pada gambar utama sebelum hover. Efek transisi bekerja pada tiga nilai. Yang pertama adalah elemen transisi yang diterapkan, yang dalam kasus kami adalah posisi latar belakang; parameter kedua yang menerima efek transisi adalah waktu yang diperlukan untuk latar belakang penyinaran untuk menyinari gambar utama dalam hitungan detik, dan parameter ketiga adalah tipe transisi yang bisa: linier, terpental, mudah, mudah masuk, mudah keluar , mudah masuk-keluar.

 -webkit-transition: background-position  .4 s mudah; 
       -moz-transisi: latar belakang-posisi  .4 s mudah; 
         -o-transisi: latar belakang-posisi  0,4 s mudah; 
            transisi: latar belakang-posisi  0,4 s kemudahan;

Sekarang, kita tentukan posisi latar belakang yang bersinar setelah menempatkan kursor pada gambar (hover), tetapi akan kembali ke posisi awal (-260px) setelah melepaskan kursor.

 .hover_shine: hover {posisi-belakang: 250px 0; }

Menyatukan Mereka Saya pikir Anda sekarang harus memahami bagaimana efek transisi dibentuk?Menyatukan semua kode, kode terakhir akan terlihat sebagai berikut:

 <style> 
.image-shine { 
    width: 250px; 
    tinggi: 250px; 
    posisi: relatif; 
} 
.hover-shine { 
    width: 100%; tinggi: 100%; 
    background-image: url (http://4.bp.blogspot.com/-33qEOAK6J1E/UknXiuquI4I/AAAAAAAAAHa /v50bvnMQ3T0/s1600/shine.png); 
    posisi: absolut; 
    / * Posicion inicial del shine * / 
    posisi latar belakang: -260px 0; 
    kiri: 0px; atas: 0px; 
    background-repeat: no-repeat; 
    -webkit-transition: background-position .4 s mudah; 
       -moz-transisi: latar belakang-posisi .4 s mudah; 
         -o-transisi: latar belakang-posisi 0,4 s mudah;
            transisi: latar belakang-posisi 0,4 s kemudahan; 
} 
.hover-shine: hover { 
    posisi latar: 250px 0; 
} 
</style>  
<div class = "image-shine"> 
    <img src = " IMAGE-URL " /> 
    <div class = "hover-shine"> </div> 
</div>