Cara membuat efek zoom gambar saat disorot mouse

Cara Membuat Gambar Membesar Otomatis Ketika Disorot di Blog – Pernah saya menemukan beberapa blog yang memakai script tertentu pada blognya yang memungkinkan gambar yang ada di artikel blognya akan membesar dengan ukuran tertentu daripada aslinya ketika disorot dengan mouse. Nah pada waktu itu saya belum menemukan apa sih manfaatnya.? namun pada beberapa hari terakhir ini saya memosting di blog saya mulai menemukan manfaatnya, karena artikel saya di Garda Pengetahuan berorientasi pada ilmu pengetahuan seperti Fisika dan Matematika, maka ada banyak rumus yang saya masukkan didalamnya dalam bentuk gambar, yang terkadang gambarnya ini kecil dan sulit dilihat, sehingga script membantu untuk lebih jelas melihat rumusnya. Ini dia scriptnya:

Cara Membuat Gambar Membesar Otomatis Ketika Disorot di Blog

1. Login ke akun blog kamu

2. Masuk ke edit template

3. Pilih edit HTML

4. Tekan ctrl + f lalu cari kode ]]>

5. Copy kode di bawah ini lalu letakkan di atas kode ]]>

Code:

.post-body img:hover { 
-o-transition: all 0.3s; 
-moz-transition: all 0.3s; 
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3,1.3);
-o-transform: scale(1.3,1.3);
-webkit-transform: scale(1.3,1.3); }

6. Klik simpan/save

7. Buka blog kamu lalu cek apakah berhasil.

Jika misalnya tidak berhasil, maka coba kamu gunakan script kedua di bawah ini

Code:

.post .post-body img{margin:5px; padding:5px; border:1px solid #e0e0e0; -o-transition: all 0.5s; -moz-transition:all 0.5s; -webkit-transition: all 0.5s;}
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}

8. Klik simpan dan cek kembali

Info:

angka 1.3 adalah angka perbesaran yang akan terjadi apabila kamu menyorotnya. kamu bisa menggantinya sesuka hati tergantung keinginan.

Demikianlah informasi mengenai Cara Membuat Gambar Membesar Otomatis Ketika Disorot di Blog semoga bisa bermanfaat.