Efek Mengkilap Pada Ikon Gambar

Efek Mengkilap Pada Ikon Gambar - Efek mengkilap pada sebuah ikon gambar ketika mouse diarahkan pada ikon gambar tersebut (:hover) dengan menggunakan CSS, banyak efek ikon gambar yang bisa kita buat, baik dengan efek berputar, show up ataupun efek yang lainnya.

Namun pada kesempatan ini kita akan membuat Efek Mengkilap pada Ikon Gambar hanya dengan menggunakan CSS, seperti apa efek tersebut? Kita bisa melihatnya melalui tombol demo dibawah.

Membuat Efek Mengkilap Pada Ikon Gambar

CSS

a.mengkilap { 
  display: block; 
  background: url("http://dezige-in.googlecode.com/svn/trunk/notrans.png") 0 0 no-repeat; 
  height: 100px; 
  width: 100px; 
  overflow: hidden; 
}

a.mengkilap span { 
  display: block; 
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaNKXRjFrhNvXYOw_n0P4zit9TNttG3pyQIr4it8U8RXrZwCPBUC4OjUVtDlq6EjzkRUm3pFL84lutjgD0-rJjbJ_2KNGcDHaWiPk1xpXaPOdQKnkTZc-SqRH9ulEXwoRlpx1O1GrFuYhb/s1600/shine.png") -60px -80px no-repeat; 
  transition-property: all; 
  transition-duration: .5s;  
  height: 100px; 
  width: 100px; 
  border-radius: 80%;
}
  
a.mengkilap:hover span {
  background-position: 100px 100px; 
 }

Pada CSS diatas sudah saya masukan alamat gambar, supaya kita bisa melakukan modifikasi dan mempermudah kita dalam memahami bagaimana kita membuat Efek Mengkilap pada Ikon Gambar

Dan HTML yang kita pergunakan adalah seperti ini:

HTML

<a href="/" class="mengkilap"><span></span></a>

Kita bisa pergunakan efek mengkilap pada ikon gambar untuk gambar-gambar yang ada blog kalian.

• Demo

Semoga dengan adanya cara membuat efek mengkilap pada ikon gambar bisa menambah kosa dalam hal efek-efek untuk sebuah ikon gambar.

Semoga bermanfaat.