Effect Hover Zoom Smooth pada Gambar

Halo, kembali lagi nih bersama saya :D Cukup lama saya sudah tidak posting blog ini :) Tetapi dalam kesempatan yang amat sempit kali ini saya akan berbagi mengenai Effect Hover yang berkaitan dengan Zoom dengan qualitas Smooth (halus). Zoom dibagi dua jenis yaitu Effect Zoom in (perbesar) dan Effect Zoom Out(perkecil).

Effect Hover yang saya diskusikan disini adalah Effect Hover suatu Object (gambar, tulisan) yang aktif ketika cursor diarahkan ke Object. Effect Hover seperti ini biasanya menggunakan kode Script, ajax, ataupun Jquery yang kualitasnya sangatlah bagus, tetapi bisa juga dengan cara memakai kode CSS Transisi (transition)

Kita ambil contoh Effect Zoom in dan Zoom Out seperti gambar dibawah ini :

Nah sudah dilihat bukan kebagusan dari Effect Zoom tersebut. Zoom in ukuran Skalanya (scale) = 1.3, sedangkan Zoom out Skalanya = 0,6. Dapat disimpulkan bahwa sebuah Object Berawal pada Skala (1) atau (1.0) berarti jika lebih dari skala tersebut menjadi Zoom in, jika kurang menjadi Zoom out.

Nah ingin diterapkan di Blogpost (Gambar pada setiap postingan) sobat? Tentu saja dengan Zoom In, kalau Zoom out gimana coba :D tetapi terserah sobat. Yuk simak liputan berikut :D.

• Pertama tama seperti biasa login blogger.com

• Masuk ke Design → Edit HTML → Centang Expand Widget Template Slalu → Letakan kode berikut tepat diatasnya kode ]]></b:skin>

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

Kode yang ditebalkan adalah kode waktu Perubahan antara kecil ke diperbesar per Sekon.

• Kemudian Save Html.

Nah, sudah jadi dah :) Sampai jumpa di Episode selanjutnya, tunggu saya yaaa, saya akan berbagi berbagai hal menarik lainnya kepada sobatku ;)