Cara Membuat Efek ZOOM Pada Gambar

Posted by : nugraha labib mujadid Kamis, 29 Desember 2011

Biasanya cara ini dpergunakan untuk menyiasati penghematan tempat apabila kita harus menggunakan ukuran gambar yang besar. Dengan cara ini gambar bisa kita perkecil sesuai dengan kolom postingan, kemudian apabila pembaca ingin melihat ukuran yang sebenarnya tinggal mengarahkan mouse saja ke gambar tersebut. (begichu lho....)

1. Silahkan login ke Blogger

terlebih dahulu.

2. Kemudian klik Tata Letak.

3. Edit HTML.

4. Letakkan kode css berikut ini, tepat diatas kode ]]></b:skin>

/* Zoom Efek */

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

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

.thumbnail span{position:absolute;left:-1000px;visibility:hidden;color: black;text-decoration: none}

.thumbnail span img{border-width:0;padding:2px}

.thumbnail:hover span {visibility: visible; top: 0; left: 60px}

Jangan lupa Simpan Template.

THANKS to RUMAH BLOG..

Share This