Hover Maning Hover Lagi

Dua web developer keren mengeluarkan trick sama mengenai efek hover menggunakan atribut CSS3. Master Mary Lou team dari Codrops Web menuliskan tentang Circle Navigation Effect with CSS3
Tinggal dibaca saja disana yah, karena memang murni kok CSS doang, jadi sobat bica pintel. Pintel bahaca inggris cama bahaca CSS yah yah yah :"> One more come from Master @WebmasterNeal alias owner NealGrosskopf.com Tak mau kalah mengusung artikel dengan tema "Create An Image Swipe/Shimmer Effect With CSS Transitions" Apakah itu!

Sebuah trick yang mana menampilkan effect ngeblitz macam tustel photo. Sekelebat ada cahaya bening menyambar pada image :D Supaya tidak pusing silahkan baca tutorialnya dan demonya disana :D --> http://www.nealgrosskopf.com/tech/thread.php?pid=79
Memakai tagging H1 pasti dikhususkan hanya bisa dipakai buat variable H1. Beben Koben si bloglang anu ganteng kalem tea melakukan sedikit otak-atik agar Swipe/Shimmer Effect bisa dipakai tidak hanya untuk variabel H1 saja ;)
Final result like this, hover you mouse on image:

demoHehehehe... (%)

Kode CSS3

.blink
{
display: inline-block;
overflow: hidden;
position: relative;
}
.blink a, .blink div.shimmer
{
height: 100%;
width: 100%;
position: absolute;
top:0;
}
.blink a
{
display: block;
z-index: 3;
}
.blink div.shimmer
{
background-image: -moz-linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-image: -o-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-image: -ms-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-image: linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%);
background-repeat: repeat-y;
background-size: 30% 100%;
left: -100%;
z-index: 2;
}
.blink:hover div.shimmer
{
left: 100%;
-moz-transition: left .45s linear;
-o-transition: left .45s linear;
-webkit-transition: left .45s linear;
transition: left .45s linear;
}

HTML or Struktur Penulisan

<div class="blink">

<a href="#link"></a>
<div class="shimmer"></div>
<img src="http://YOUR-LINK-IMAGE.png" />

</div>
Susunan nulisnya harus begitu, jangan salah yah ;;) Semoga sesuatu yah :)
Happy hover \m/