◄ Min  Size Fonts: + | - | ± Color: Max ►

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
blogger
.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
blogger
.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
blogger

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/
Loading...
XMake Hover Zoom Effect use CSS
Dasar-dasar penjelasan kode CSS membuat efek hover zoom pada image/konten
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE