Gambar dengan Zoom Effect

Pada kesempatan kali ini blog Oto Website akan membahas tentang efek gambar pada blog dan kali ini temanya adalah Gambar dengan Zoom Effect. Sebelumnya Oto Website pernah membahas tentang efek gambar sederhana lainnya di antaranya:

• Cara Membuat Gambar Melayang
• Efek Memutar Dan Membesar Pada Gambar Saat Di Sorot Mouse.

Meginstal dan penerapan Gambar dengan Zoom Effect pada blog juga sangat mudah di bandingkan dengan efek gambar sebelumnya.

Untuk lebih jelasnya tentang Gambar dengan Zoom Effect silahkan Anda lihat demo berikut ini.

Live Demo ▼

---

Cara menginstal Gambar dengan Zoom Effect

---

1. Masuk ke akun blogger Anda.

2. Pada Dasbor klick ➨ Template ➨ Edit HTML.

3. Lalu temukan kode ]]></b:skin> atau </style> bila kesulitan mencari kode HTML silahkan klick DISINI.

4. Lalu letakkan kode berikut tepat di atas kode tadi.

.ow 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 10px 5px 0;
}

.ow img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

6. Simpan template.

---

Cara Penerapan atau memanggil Gambar dengan Zoom Effect

---

1. Sekarang untuk menerapkan Gambar dengan Zoom Effect.

2. Pada saat mengedit postingan masukkan kode berikut.

<a class="ow" href="http://otowebsite.blogspot.com/" target="_blank">
<img src="https://lh3.googleusercontent.com/-R-uhsoNgp-s/AAAAAAAAAAI/AAAAAAAAADc/A1eF2Q9dqKc/s250-c-k/photo.jpg" /></a>

Keterangan:
Ganti teks warna ungu dengan url Anda.
Ganti teks warna kuning dengan url gambar.

Saya rasa cukup untuk kali ini, Silahkan tinggalkan tanggapan atau komentar Anda.