You must enable Javascript in your browser to run or open this site.

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 ;)

25 comments

  1. bisa untuk mempercantik blog kita...

    BalasHapus
  2. trik yang bagus brow, nanti klo ada niat pasang deh

    BalasHapus
  3. thanks brow dah mampir lagi di gubuk ane yg jelek dan kucel xixi

    BalasHapus
  4. .kaya.y q prnah liat artikel ini deh
    .
    .
    .hehehehe

    BalasHapus
  5. Dimana?
    kalo punya kk, tentu saja beda...
    Screipt css sama, emang betul kk yang buat scriptnya? :) kalo iya ane cantumkan link ente, lagi pula gak kopas kok. coba liat, kalo kopas juga ane pasang kok linknya :)

    BalasHapus
  6. salam sob
    efek smooter ini akan memperindah gambar

    BalasHapus
  7. belum mengerti sayanyahh.. hehehe

    BalasHapus
  8. To daengrompa : Kalau menggunakan Browser yang Support Css full pasti bagus :)

    BalasHapus
  9. Follow balik yah ,,,, sekalian mau tambah teman ,,
    http://www.lintascerita.com

    BalasHapus
  10. sebuah trik yang luarbiasa!!!
    kalau zoom memperbesar saya mengerti mengapa kita memerlukannya.. namun tuk yang satunya lagi... memperkecil... kira-kira, manfaatnya untuk?!?

    BalasHapus
  11. To Majalah Masjid Kita : Hehe saya pun tidak lah tau :D kira kira apa sob? Terserah sobat mau digunakan untuk apa :) asal yang dapat dimengerti pengunjung :D

    BalasHapus
  12. sip2... udah bisa tak terapin di blog... cuman nulis kode sederhana gini,,hasilnya uar biasa...

    BalasHapus
  13. btw, kenapa gambar avatar-ku di kotak komentar ini berupa emoticon?? nggak bisa jadi foto sepeerti komentarmu dan komentarnya aasyafiq??

    BalasHapus
  14. Komentar kamu itu berupa LINK URL bebas, kalo link blogger contoh blogger.com/profile/BLABLABLA.... itu baru bisa memunculkan avatar gitu sob, soalnya avatarnya berasal dari Blogger accountmu sendiri :))

    BalasHapus
  15. tapi komentar yang kedua pake link akun blogger kog..

    BalasHapus
  16. ini yg saia cari2 sob ...
    makasih infonya sobat ... :)

    BalasHapus
  17. matur tekyUU kang buat info dan tips-nya + ijin copy tipsnya..! soal link pasti ada.. :D

    BalasHapus
  18. To Shinobi : Thanks ya gan kunjungannya :)
    To Petu Boy : Sama sama sob :) hehehehe kalo kopas harus link sob emang :D

    BalasHapus
  19. Wahhh mantap bro.. jadi nambah ilmu nich... :D

    BalasHapus
  20. To Miftahudin : hehehehe thanks supportnya :)
    To Download Movies 21 : TKP om :)

    BalasHapus