Cara Membuat Efek Zoom Pada Image Blog

Salah satu cara untuk membuat blog kita tampil unik selain dengan memasang widget, adalah dengan memasang berbagai efek pada halaman blog. Sebenarnya bayak sekali macam-macam efek yang bisa dipasang pada halaman blog seperti efek hujam deras, atau bintang jatuh dan yang lainnya. Bisa anda cari di blog sobat aye

Nah pada kesempatan ini aye akan mengulas sedikit tentang cara membuat efek  zoom pada gambar ( image ) blog.

Seperti yang sobat lihat, pada gambar diatas akan terlihat membesar saat di tunjuk oleh pointer mouse.

Langkah untuk membuat efek zoom pada image blog adalah sebagai berikut :

1.   Login ke akun blog kita > Rancangan > Edit HTML > expand widget

2.   Cari kode    ]]></b:skin>

3.   Paste kan kode di bawah ini tepat diatas   ]]></b:skin>

.post img, table.tr-caption-container {

border:none;

max-width:560px;

height:auto;

-o-transition: all 0.5s;

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

}

.post img:hover {

-o-transition: all 0.3s;

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

-moz-transform: scale(1.5);

-o-transform: scale(1.5);

-webkit-transform: scale(1.5);

-webkit-border-radius: 36px 12px;

-moz-border-radius: 36px / 12px;

-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);

}

4.   Simpan Template

5.   Lihat hasilnya

Aye rasa cukup mudah untuk membuat efek zoom pada image blog, kalau menurut anda bagai mana ?

Sekian dulu postingan aye kali ini semoga bermanfaat, dan selamat mencoba

Terima kasih telah membaca artikel cara membuat efek zoom pada image blog di tempat aye.