Home » , , , » Cara Sederhana Membuat Efek Gambar Membesar ketika Disentuh Cursor

Cara Sederhana Membuat Efek Gambar Membesar ketika Disentuh Cursor

Efek Gambar Membesar Ketika Disentuh Cursor
Selamat malam para Sobat blogger. Sudah lama rasanya blog ini terbengkalai dan gak update posting. Hanya sharing info saja walaupun posting tentang cara ini mungkin sudah ketinggalan update, hehee. Tapi mudah-mudahan berguna bagi Sobat yang belum tahu caranya. Oke to the point saja bagaimana caranya. 

Sebetulnya ada beberapa cara, pasti banyak dari Sobat blogger yang sudah posting. Tapi kebanyakan biasanya diminta cari kode ]]></b:skin> terus taruh kode script di bawah ini contohnya (warna biru) diatas kode ]]></b:skin>.


.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

Memang hasilnya gambar membesar ketika disentuh cursor. Tapi efeknya pada semua gambar tiap posting pasti membesar ketika disentuh. Sampai image yang mewakili posting juga ikut membesar. Sedangkan kita hanya menginginkan efek zoom gambar di posting tertentu saja. Seperti yang sudah pernah saya terapkan di blog saya ini dulu. Senang sih bisa menerapkan kode HTML itu tapi rasanya kurang sreg saja.

Tapi akhirnya saya ketemu juga cara memperbesar gambar tanpa membuat seluruh gambar ikut membesar ketika disentuh cursor. Bagaimana caranya? Yuk kita simak sama-sama.

Cara Sederhana Membuat Efek Gambar Membesar ketika Disentuh Cursor

1. Seperti biasa login ke blog Sobat.
2. Pilih template dan klik edit HTML.
3. Cari kode ]]></b:skin> dan copas kode script di bawah ini diatas kode ]]></b:skin>.


.Galeri {
    height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.Galeri:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);

}

4. Jangan lupa simpan/save.
  • Silahkan terapkan efek gambar ini dengan meletakkan kode HTML di bawah ini (warna kuning) dimana posisi gambar akan diletakkan. Baik di posting, widget, atau template.
   <img class="Galeri" src="URL GAMBAR"/>

Contoh Efek Gambar Membesar


Efek Zoom Gambar
  • Ubah warna merah diatas dengan ID gambar Sobat.
  • Ubah warna biru diatas dengan URL Gambar Sobat.
  • Contoh seperti ID dan URL Gambar di bawah ini yang saya punya, contoh gambarnya diatas (Orang naik kuda).
<a href="https://4.bp.blogspot.com/-nvuxE9L1ggc/WCMgBB5FyGI/AAAAAAAACBs/rMsBtcv7xN0b-sPCwHywLTz3nZ8kP5tbwCLcB/s1600/Galeri_01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class="Galeri" border="0" src="https://4.bp.blogspot.com/-nvuxE9L1ggc/WCMgBB5FyGI/AAAAAAAACBs/rMsBtcv7xN0b-sPCwHywLTz3nZ8kP5tbwCLcB/s1600/Galeri_01.jpg" /></a>
  • Saya hanya menambahkan Class="Galeri" saja, hasilnya lihat gambar diatas (orang naik kuda) dan coba arahkan cursor ke tengah gambar. atau lihat demo di bawah ini.

Demikian sedikit sharing info Cara Sederhana Membuat Efek Gambar Membesar ketika Disentuh Cursor ini saya sampaikan. Mohon maaf bila ada kekurangan. Somoga bermanfaat & Happy Blogging. (kangtebe.net).*

11 komentar:

  1. Nahh..ini patut dicoba nih Kang..hehhee

    ReplyDelete
  2. Aina@ Silahkan boleh dicoba, mudah2an dapat diterapkan.

    ReplyDelete
  3. Replies
    1. Hendi@ Sama2 Kang Hendi, moga bisa dicoba

      Delete
  4. Ternyata cara memperbesar efek gambar ini tidak sulit. Jadi bisa saya terapkan di kantor tempat saya bekerja, yang menggunakan komputer / laptop setiap harinya.

    ReplyDelete
  5. Amelia@ Iya boleh dicoba dan diterapkan, mudah sekali kok.

    ReplyDelete
  6. Cara ini tidak cukup sulit untuk di coba. Terimakasih kang sangat membantu.

    ReplyDelete
  7. Susan@ Ya benar, silahkan dicoba terapkan di blog Anda.

    ReplyDelete
  8. Cara / tehnik memperbesar efek gambar ini terlihat mudah, namun bagi pemula seperti saya yang baru memasuki blog, cara ini teramat bermanfaat.

    ReplyDelete
  9. Adrian@ Ya Kawan boleh dicoba diterapkan.

    ReplyDelete
  10. Jadi seperti itu ya, cara membuat efek gambar agar tampak lebih besar ketika di gerakan oleh cursor mouse.

    ReplyDelete

loading...