CSS efek zoom gambar `

bagaimanakah cara memberi efek auto zoom gambar ( memperbesar ukuran gambar ) pada artikel blog anda ..apa dengan css saja sudah bisa ..?

terkadang kita membutuhkan yang namanya zoom gambar atau efek membuat  gambar menjadi besar sendiri  --Ketika sebuah gambar disorot dengan mouse atau kursor mouse diarahkan ke gambar tersebut maka gambar tersebut memberi efek zoom sehingga menjadi lebih besar.

Efek zoom ini banyak beredar di internet hanya saja saya ingin mengulas lebih rinci cara memberi efek zoom pada gambar tersebut, sehingga mudah dipahami oleh user yang baru belajar sekalipun.
efek zoom gambar ini sebetulnya hasil paduan dari transition dengan css3
2D transform skale ..

div img:hover{transform:scale(value);}

oke kita akan buat sebuah gambar di dalam element div

<style>
.Zoom 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); }</style>
<div class="Zoom"><img src="https://06080c19-a-62cb3a1a-s-sites.googlegroups.com/site/mas4nton/blognya-mastony/macbook.png"/></div>

Note : untuk mengatur besar efek zoomnya anda bisa merubah pada bagian (1,3) semakin besar nilainya akan semakin besar efek pembesaranya .1 untuk X dan 3 untuk Y
untuk transition adalah efek memperlambat pergerakan , selengkapnya anda bisa baca di sini CSS3 Element bergerak transition
dan hasilnya sebagi gambar di bawah :
Note : text yang berwarna merah itu adalah url lokasi gambar silahkan anda ganti ..



Gambar yang sama namun dengan efek zoom gambar agak besar ..



lalu bagaimana agar efek zoom pada gambar secara otomatis tanpa harus menggunakan div ..?

bagi anda yang ingin efek zoom gambar secara otomatis anda cukup menaruh aturan CSS nya saja tepat sebelum kode  ]]></b:skin>

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

saya rasa cukup di sini untuk tutorial cara meberi efek Zoom gambar pada artikel blog anda ..Semoga bermanfaat bagi sobat ..

Terima kasih Anda telah membaca Artikel mengenai CSS efek zoom gambar dan Kata kunci untuk Artikel ini yaitu CSS efek zoom gambar

2 komentar:

  1. Kalau zoomnya jadi gede yang munculnya seperti popup gimana caranya gan?

    BalasHapus
  2. GAPTEK @ makasih kunjunagannya gan .. pop up window maksudnya ...

    BalasHapus

Silahkan Anda Komentarkan Tentang Post ini yang baik dan sopan,
Jangan sampai komentar anda dianggap spam . . .