Menampilkan Image dalam Efek Zoom Image

Tidak jarang dalam sebuah blog, kamu memasukkan berbagai macam image, baik yang berukuran kecil maupun besar. Semakin besar ukuran suatu image, maka semakin besar pula waktu yang dibutuhkan untuk meloadingnya. Sehingga alangkah baiknya apabila image tersebut kamu optimasi dalam ukuran kecil yang jika didekati oleh kursor mouse akan menampilkan image yang relatif besar. Yah, lumayanlah apalagi blogku banyak gambarnya (khusus yang punya blog bergambar porno dan mau menggunakan trik ini. Jangan bilang-bilang bahwa kamu dapat triknya dari OB he..he..he..). Bonus tambahannya, yakni teks yang dapat menampilkan image, jika didekati kursor mouse. Nah, trik blogger ini didapatkan setelah OB jalan-jalan ke Dynamic Drive CSS Library. Sebagai illustrasi, silakan dekatkan kursor pada image dan teks berikut :

Icon OB

Apabila kamu tertarik dengan trik blogger ini, mari kita review cara menampilkan image dalam efek zoom Image tersebut.

• Login ke account blogger kamu.
• Pilih Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Tambahkan kode CSS berikut di atas kode ]]></b:skin>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* Zoom Efek */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

• Simpan template kamu

Cara penggunaan :

Kode HTML untuk image zoom.

<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3aZ52nq6hlRVeioyeE4TsnIlr1IIFE5E1nr-OkLrssS1tZSTykHv5DGIPWp4jMg0BT9q0IzDRexEQX8DOuTzlbgrDoAULpGWi52MDVjwkeox9kzriAX3c63U4vAfIlrLEXtY_AOzBIcc/s800/Chicklet%20OB.png" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3aZ52nq6hlRVeioyeE4TsnIlr1IIFE5E1nr-OkLrssS1tZSTykHv5DGIPWp4jMg0BT9q0IzDRexEQX8DOuTzlbgrDoAULpGWi52MDVjwkeox9kzriAX3c63U4vAfIlrLEXtY_AOzBIcc/s800/Chicklet%20OB.png" width="180px" height="100px"/></span></a>

Kode HTML untuk teks.

<a class="thumbnail" href="#thumb">Icon OB<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoYVwcqF5sd6UrslxTjGa8fUQUOhsKI5ypt1gvwCuNxydXVbRW5rOzEhzj3m1Rrt8mdcOeSZ667dUKwxOK4nvIqVp5fC0t-Wdrz_x4qrXNWakdGpeAtM7ww_JLFuivei6fbS5WWO-8Udw/s144/Chicklet%20OB2.png" /></span></a>

Catatan :

1. Kode yang berwarna merah merupakan default image dan teks yang akan kamu tampilkan.
2. Kode yang berwarna hijau merupakan sisipan kode, agar default image akan menampilkan efek zoom.
3. Kode berwarna biru merupakan sisipan kode, agar default teks akan menampilkan image.
4. Jika ingin memperbesar zoom, silakan atur kode yang berwarna hijau dan berkedap-kedip (width dan height).
   

Selamat menampilkan image dalam zoom efek...