Efek Zoom

          Kali ini saya akan mencoba mengupas tentang Cara membuat efek zoom pada sebuah gambar, Anda mungkin telah melihat Image Zoom Effects di banyak blog profesional dan komersial. Ketika Anda membawa kursor mouse Anda pada sebuah gambar dan gambar tersebut penampilannya berubah menjadi besar. Seperti contoh Gambar di bagian bawah posting ini,coba anda periksa.
Dengan menggunakan CSS sederhana Anda dapat menambahkan  efek menakjubkan pada gambar di Blog Anda . Tanpa membuang waktu langsung menuju langkah-langkah berikut ini.

Langkah #1

Masuk ke blogger--> Layout-->Edit HTML
Cari kode berikut ]]></b:skin>
Kemudian sisipkan kode CSS di bawah ini tepat di atas kode tadi

.thumbnail{

position: relative;

z-index: 0;

}

.thumbnail:hover{

background-color: transparent;

z-index: 50;

}

.thumbnail span{

position: absolute;

background-color: #7AA1C3;

padding: 0px;

left: -1000px;

border: 1px solid gray;

visibility: hidden;

color: white;

text-decoration: none;

}

.thumbnail span img{

border-width: 0;

padding: 0px;

}

.thumbnail:hover span{

visibility: visible;

top: 0;

left: 5px;

}

Langkah #2
Sekarang setiap kali Anda menulis suatu posting cukup masukan kode di bawah ini

<a class="thumbnail" href=""><img src= "URL GAMBAR anda" border="0" height="100px"  width="100px" /><span><img src="URL GAMBAR anda" />Deskripsi anda</span></a>

Editlah yang sudah saya sorot warna merah , hijau dan biru

Contoh gambar efek zoom : ( silahkan bawa kursor mouse anda tepat di atas gambar )

Efek zoom

Efek zoom