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.

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 Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Berbagi :