Beranda / CSS / Tips Blogger

Cara Mudah Membuat Efek Zoom Gambar Otomatis di Blog

Oleh Surya Posting Komentar
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.

Anda mungkin menyukai postingan ini :

Posting Komentar untuk "Cara Mudah Membuat Efek Zoom Gambar Otomatis di Blog"