Membuat Pembesaran Gambar

efek pembesaran gambar
Pembesaran gambar atau hover image merupakan sebuah trik untuk memberi tampilan aktif (bergerak) pada gambar. Tampilannya bisa membesar dari ukuran semula. Berikut cara membuat pembesaran pada gambar.

Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>
.hovergallery img{-webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -o-transition-duration:0.5s; opacity:0.7; margin:0 10px 5px 0}
.hovergallery img:hover{-webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); box-shadow:0px 0px 30px gray; -webkit-box-shadow:0px 0px 30px gray; -moz-box-shadow:0px 0px 30px gray; opacity:1}
Klik Simpan Template
Jika anda ingin membeikan efek pembesaran pada gambar (misalnya di dalam posting) tambahkan kode berikut pada gambarnya.
<div class="hovergallery">
<img alt="judul gambar" src="alamat gambar anda di sini" title="title posting atau jdul gambar di sini" />
</div>

Jika anda ingin menambahkan beberapa gambar silahkan tambahkan kode seperti di bawah ini
<div class="hovergallery">
<img alt="judul gambar" src="alamat gambar anda di sini" title="title posting atau jdul gambar di sini" />
<img alt="judul gambar" src="alamat gambar anda di sini" title="title posting atau jdul gambar di sini" />
<img alt="judul gambar" src="alamat gambar anda di sini" title="title posting atau jdul gambar di sini" />
dst........
</div>
Selesai dan lihat hasilnya
Selamat mencoba


"keep spirits and do the best"

This entry was posted in

One Response so far.

  1. boleh juga nie.. terimakasih atas infromasinya

Leave a Reply

    About Me

    Category

    • (4)
    • (1)
    • (4)
    • (15)
    • (17)

    Responses