Fancy Hover for Image with CSS3

Sebelum membabat tutorial hack full stylish kepunyaan master Aratina Cage, Koben akan berbagi kembali trick dan tips seputaran hover. Memang tidak ada habisnya trik hover kalau dibahas ;)) Coba lihat artikel Koben sebelumnya sexy hover for image used CSS3. Hover attribute selalu berkaitan erat ketika kita sedang melakukan menyorot suatu object, dimana akan terlihat reaksi hover sesuai dengan kode yang kita pasangkan :D Ngerti sukur nggak paham pasti :P
Ada baiknya jika sobat berolah raga sebentar menjelajah trick hover yang ada di blog gaya oke punya ini:

• hover Oh hover.
• efek hover image kebalik.
• thumbnail hover image file blogger.

Bagi yang sudah membacanya, baca kembali biar makin gooder :D Okelah Koben langsung ke acara pamungkas bagaimana cara membuat fancy hover for image with CSS3. Terinspirasi setelah membaca postingan how to create a fancy image gallery with CSS3. Bagi yang mau membuat galeri image oke punya silahkan ikuti langkah²nya pada web bersangkutan :)
Setelah dipikir-pikir ternyata trick tersebut bisa gue simpulkan perpaduan gaya antara CSS3 hover image for blogger & popup image used only CSS!
Trick hovering by Admix Web dikhususkan guna menampilkan image dengan pemanggilan tagging memakai tag defines a list item <li> Ada sedikit masalah juga kalau memakai rumusan dari sana, ketika kita melakukan hover pada object yang besar akan ada jejak bekas shadow box terlihat.

Solusi untuk ini yakni dengan memberi batas pada width & height pada hover atribut. Jadi image dengan resolusi yg lumayan besar akan kurang terpakai :D (ya sudah kalau tidak paham, memang susah untuk paham itu) :P
Oleh sebab itu si Bloglang anu ganteng kalem tea memodifikasi trik itu agar berfungsi pada single image for every image! (gak paham lagi juga gak apa-apa)

Demo Fancy Hover for Image

Terlihat perbedaannya kan! Walau tinggi gambar ditinggikan, dan lebar image dilebarkan tidak tampak bekas jejak shadow box!

CSS3 Coded

.mini {
margin: 5px;
width: 100px;
height: 100px;
}
.gallery .after {
padding: 10px;
visibility: hidden;
position: absolute;
background: #FFA;
border: 1px solid #555;
-webkit-box-shadow: #333 0 0 10px;
-moz-box-shadow: #333 0 0 10px;
box-shadow: #333 0 0 10px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.gallery:hover .after {
width: 300px;
height: 300px;
visibility: visible;
margin-left: -50px;
margin-top: 10px;
}
.after {
width: 0;
height: 0;
}

Keterangan:
Kode warna merah tua = gambar tampil yang terlihat.
Kode warna biru muda = gambar tampilan hover ketika disorot.
Untuk mengatur jarak image hover, pada kode warna biru muda ada variable margin-left & margin-top.

HTML Syntax

<div class="gallery">

<img src="http://LINK-IMAGE-TAMPAK.jpg" class="mini"/>
<img src="http://LINK-IMAGE-HOVER.jpg" class="after"/>

</div>God luck :)
Happy hover funky crot \m/