Make Hover Zoom Effect use CSS

Tiba-tiba saja kepingin membahas seputaran efek zoom menggunakan atribut CSS. Secara global definisi zoom di sini yaitu sudah pasti menjadikan sesuatu lebih dari. Beragam trik dapat kita pakai untuk membuat satu konten/image lebih besar dari ukuran normal. Tetapi secara basic dengan hanya memakai var. bahasa CSS v2 sudah bisa kita membuat efek zoom secara sederhana.
Satu hal yang harus diingat, kita harus memberikan batasan awal (width/height) agar dapat terlihat efek membesarnya nanti :D Oke mari kita mulai saja acara memasak bareng saya parah kuin...
Hover using CSS v2
.zoom {
width: 100px;
height: 50px;
}
.zoom:hover {
width: 200px;
height: 100px;
}Dengan begitu saja sudah bisa buat efect hover zoom ;)) Sekarang biar lebih lembut efeknya saat melakukan hover tambahkan dengan atribut transition-duration
Hover Zoom + transition-duration
.zoom {
width: 100px;
height: 50px;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
.zoom:hover {
width: 200px;
height: 100px;
}Mudah sekali bukan anak-anak ;)) Duration kita hilangkan pada variable transition tambahkan atribut transform: scale
Hover effect use scale

pointer over here

---

Contoh efek ZOOM yang dibangun memakai variabel transform: scale

.zoom {
width: 212px;
padding: 5px;
border: 1px solid #555;
z-index: 10;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.zoom:hover {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}Demikian acara dasar-dasar membuat efek zoomer memakai CSS. Lebih kurang silahkan sobat cari referensi lain :)
http://www.adobe.com/devnet/html5/articles/using-css3-transitions-a-comprehensive-guide.html
Happy CSS \m/