Cara Sederhana Membuat 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

• 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBB39gsRsoZyqFmua6eWjZBbIJ7ShrNV7y6CsCmospu5Yv8ncTPz7LsPhYlW41r5gss0wIc691Rg7fwFtAZxLuj75ZnD4rxD3LEjne28l4DqsgrLgCIfVcSUh0LjSbcg5ickAdJGd6-tI/s1600/Galeri_01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class="Galeri" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBB39gsRsoZyqFmua6eWjZBbIJ7ShrNV7y6CsCmospu5Yv8ncTPz7LsPhYlW41r5gss0wIc691Rg7fwFtAZxLuj75ZnD4rxD3LEjne28l4DqsgrLgCIfVcSUh0LjSbcg5ickAdJGd6-tI/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.

DEMO

Demikian sedikit sharing info Cara Sederhana Membuat Efek Gambar Membesar ketika Disentuh Cursor ini saya sampaikan. Mohon maaf bila ada kekurangan. Semoga bermanfaat & selamat mencoba.