css3 : Memperbesar Gambar Saat Disentuh Mouse

Sering kita jumpai saat mengujungi suatu halaman web dan saat halaman tersebut termuat semuanya maka kita melihat adanya suatu gambar yang jika disentuh akan membesar. Proses yang terjadi bisa menggunakan javascript jika atau css3 jika perbesaran yang diinginkan adalah berbentuk animasi, sehingga perubahannya bisa dilihat.Jika sekedar hanya ingin membesar sekejapan mata maka hanya menggunakan css2 pun dapat dilakukan.
Tujuan hal ini yang sering terlihat adalah pada website photo gallery atau eshop untuk memperjelas pengunjung akan produk yang ditampilkan. Padahal template sudah ada, dan hack gambarlah yang mudah dilakukan mengingat tidak mengorbankan keseluruhan template untuk gambar tersebut. Dan tentu saja pertimvangan desain lainnya. Jika menggunakan javascript maka harus terlebih dahulu menguasai dasar dasar javascript agar mudah untuk mengembangkan, sebagai saran gunakan javascript dom. Dalam hal ini postingan menggunakan css.
Tujuan hal ini yang sering terlihat adalah pada website photo gallery atau eshop untuk memperjelas pengunjung akan produk yang ditampilkan. Padahal template sudah ada, dan hack gambarlah yang mudah dilakukan mengingat tidak mengorbankan keseluruhan template untuk gambar tersebut. Dan tentu saja pertimvangan desain lainnya.

Yang paling diingat dalam postingan ini adalah css3 transform dan transition yang merupakan dasar animasi menggunakan css. oleh karena itu seorang webmaster dapat mengutak atik dari kelebihan property ini demi presentasi yang dihasilkan.
ok sekiranya yang dapat di tulis adalah sebagai berikut :

<style>
img { width:100%; height:100%;position:absolute;}
.wadahgambar {width:200px;height:150px;}
</style>

sehingga pada htmlnya pada dari css diatas adalah kira kira seperti berikut ini:

<div class="wadahgambar"><img url="alamat dari gambar tsb" title="contoh1"  />
<p>text:mouse here</p></div>

dari snippet diatas maka bisa dimengerti adalah standar gambar yang ditampilkan, oleh karena itu untuk animasi saat gambar disentuh adalah dengan adanya  selector :hover  maka yang terjadi adalah :
Nah itu adalah cara memperbesar gambar dengan css2 yang mana perubahannya terlihat sekejap mata  tanpa adanya efek penghalusan.
untuk itu css3 berperan penting disini yaitu atribute transition, sehingga terlihat pergerakkanya saat membesarkan diri.
karena berbagai browser menciptakan aturannya masing masing maka harus ditulis berdasar aturan tersebut yang  umumnya
disebut vendor, seperti terlihat seperti ini:

img { width:100%; height:100%;position:absolute;}
.wadahgambar :hover {width:200px;height:150px;}
.wadahgambar {width:250px;height:175px;}

Lebih dari itu untuk penggunaan css3 dalam membesarkan suatu gambar adalah dengan property transform value scale
yaitu sebagai berikut hasilnya:

img { width:100%; height:100%;position:absolute;}
.wadahgambar :hover {width:250px;height:175px;}
.wadahgambar {width:200px;height:150px;}
-webkit-transition-duration:all 1s;
-moz-transition-duration:all 1s;
-o-transition-duration:all 1s;
transition-duration:all 1s;<br><style>

Itulah perbedaan dari snippet yang diatas dengan yang dibawah, yang mana pada snippet yang bawah menggunakan skala perbandingan dari awalnya, dan tertera  disitu adalah 130% dari aslinya tentunya para webmaster dapat menentukan sendiri kapan untuk angka absolute kapan untuk prosentase.
well, hanya segitu saja hari ini.