Skip to content Skip to sidebar Skip to footer

Cara Mudah Membuat Efek Zoom Gambar Otomatis di Blog

Efek zoom adalah sebuah efek otomatis yang bisa anda gunakan di blog dan website. efek ini bernama transform css. properties css ini bisa membuat elemen gambar di html menjadi perbesar, sehingga gambarnya akan dua kali besar dari biasanya. efek ini akan berfungsi saat anda mengarahkan kursor mouse ke atas gambar.
zoom in out gambar di postingan blog
Efek ini sangat cocok untuk blog yang membahas segala tutorial menggunakan gambar. terkadang saat pengunjung ingin melihat gambar terlalu kecil, maka dari itulah memasang efek zoom ini kepada gambar blog anda. sehingga bisa diliat dan jelas.

Bagi anda ingin memasangnya di blog, ternyata mudah sekali hanya membutuhkan satu properties css yaitu bernama transform. berikut tutorialnya.

Cara Memasang Efek Zoom (Perbesar) Gambar Otomatis Di Blog

1. Login ke blogger, masuk ke edit HTML.
2. Selanjutnya cari kode ]]></b:skin>, lalu salin dan paste script css di atas ]]></b:skin>. simpan theme.
.post 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 2px 2px 0;
}
.post img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
3. Selesai.

Demikianlah, cara memasang efek zoom gambar di semua postingan blog. semoga artikel ini bisa bermanfaat untuk anda.
Surya
Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Post a Comment for "Cara Mudah Membuat Efek Zoom Gambar Otomatis di Blog"