Hover Image with Effect

Sebelum melangkah lebih lanjut untuk menggunakan KODE CSS hover melayang, perlu kita pahami bersama terlebih dahulu yang dimaksud dengan haver melayang atau fly hover ini.
Fly hover sebenarnya sama saja seperti bentuk hover yang lain yaitu memunculkan teks atau image saat cursor berada di atasnya. Pada hover biasa, desain hover dengan memperbesar ukuran obyek dari ukuran aslinya akan membuat posisi obyek di sekitarnya berubah sehingga akan mengganggu kenikmatan seseorang saat menikmati obyek-obyek yang ada karena posisi obyek yang lain menjadi berpindah tidak beraturan.

Dalam demo yang akan anda lihat merupakan desain yang sama namun menggunakan effek css3 transition. Fungsinya sama persis dengan seluruh kode dalam posting ini, hanya saja yang di posting ini tidak menggunakan effek css3. Perbedaan yang lain adalah posisi preview image saat thumbnail/image diposisikan di kiri dan kanan posting. Silahkan anda bisa mencoba dari kedua desain yang tersedia, baik di sini atau yang disertakan dalam demo.

KODE CSS dan xHTMLfly hover :

.GRflying_gallery{
        margin:20px auto;
        width:98%;
        padding:1%;
        background:#fff;
        text-align:center;
}
a.GRflying{
        position:relative;
        cursor:pointer;
}
a.GRflying img{
        height:100px;
        width:auto;
        margin:2px;
        padding:4px;
        background:#666;
        border:2px solid #eee;
        border-radius:5px;
        box-shadow:0 0 6px #999;
        opacity:0.7;
        filter:alpha(opacity=70);
}
a.GRflying:hover img{
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.GRflying span{
        display:none;
        position:absolute;
}
a.GRflying:hover span{
        display:block;
        z-index:999;
}
a.GRflying span img{
        background:rgba(0,0,0,0.6);
}
a.GRflying:hover span img{
        width:auto;
        height:400px;
        box-shadow:4px 4px 4px #999;
        border-radius:12px;
}
a.GRkiri{margin:5px 12px 5px 0;float:left;}
a.GRkanan{margin:5px 0 5px 12px;float:right;}
a.GRflying span{right:-80%;bottom:150px;}
a.GRkiri span,a.GRkanan span{bottom:-200px;}
a.GRkiri span{left:100px;}
a.GRkanan span{right:100px;}

 Penggunaan :



Anda dapat menggunakan fungsi hover image untuk posting biasa dengan 
gabar/image di posisi sebelah kiri dan kanan serta untuk membangun image
 gallery.

xHTML Image di Kiri:

<a class="GRflying GRkiri" href="http://gubhugreyot.blogdetik.com/"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>

xHTML Image di Kanan:

<a class="GRflying GRkanan" href="http://gubhugreyot.blogdetik.com/"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>

xHTML Image Image Gallery:

<div class="GRflying_gallery">
<a class="GRflying" href="URL"><img src="thumbnail-1.jpg" /><span><img src="image-1.jpg" /></span></a>
<a class="GRflying" href="URL"><img src="thumbnail-2.jpg" /><span><img src="image-2.jpg" /></span></a>
<a class="GRflying" href="URL"><img src="thumbnail-3.jpg" /><span><img src="image-3.jpg" /></span></a>
<a class="GRflying" href="URL"><img src="thumbnail-4.jpg" /><span><img src="image-4.jpg" /></span></a>
</div>

Catatan/Keterangan :

• thumbnail.jpg, thumbnail-1.jpg s/d thumbnail-4.jpg adalah image berukuran kecil.
• image.jpg, image-1.jpg s/d image-4.jpg adalah image dengan ukuran besar
• Jika thumnail dan image yang akan ditampilkan berupa gambar yang sama (serupa), anda bisa mengganti thumbnail.jpg dengan image.jpg dan thumbnail-1.jpg s/d thumbnail-4.jpg dengan image-1.jpg s/d image-4.jpg
• Gunakan image dengan height=400px dan width=tak ditentukan.
• Panduan yang lebih lengkap tentang cara backup template, cara mencari kode dan berbagai cara menyimpan kode css di template dapat dibuka di Special Tutorials yang terletak di menu sebelah kiri.

Cara menggunakan :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   • Backup/Restore Template »berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template »berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates »berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS kemudian letakkan di atas ]]></b:skin>.
7. Klik "Simpan Template (Save Template)".
8. Gunakan xHTML saat posting.

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit