Make Flash & Zooming Image Effect <small>Nikesh</small>

Hanya melakukan eksperimen dengan meng-update variabel kode² CSS agar berjalan pada browsingan mozilla. Trik murni memakai atribut CSS3 berikut akan menambah perbendaharaan pengetahuan seputar CSS 3 kita :D Karena pemilik blog mungkin kecepatan dalam berkreasi, dan menggunakan var webkit dalam meramunya! Seperti kita ketahui bersama, bahwasannya variable code CSS-3 pada setiap browse itu berbeda. Membuat bingung para pemakai :D Belum lagi pengetahuan type/versi browse apa saja yg sudah support terhadap varibel tersebut #-o CSS3 Browser Support Reference
Cara cepat and simpelnya begini sob: Firefox = -moz- | Chrome & Safari = -webkit- | Opera = -o- | IE = -ms- Tanpa basa-basi busuk, dari sini gue dapetin tutorial pure CSS3 itu ;)

www.nikesh.me

Featured article dari master @nikeshhayaran "Pie Menu like Path, using jquery and CSS3" awesome banget. Sudah opensource juga tuh ;)) :x

Zooming Image in CSS3

Aslinya trick ini membuat efek Infinitely Zoom, Koben balikin kinerja efeknya jadi mendekat :D

.imageInner {
width: 200px;
height: 255px;
overflow: hidden;
margin: 10px auto;
box-shadow: 0px 0px 5px #4B2B2C;
border: 5px ridge #6F4C38;
}
.imgInner {
width: 815px;
height: 1050px;
margin-left: -277px;
margin-top: -350px;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-out;
}
.zoomInner {
animation-duration: 0.9s;
animation-name: zoom;
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.9s;
-moz-animation-name: zoom;
-moz-animation-duration: 0.9s;
}
@-webkit-keyframes zoom {
100% {
width: 815px;
height: 1050px;
margin-left: -278px;
margin-top: -350px;
}
0% {
width: 200px;
height: 255px;
margin-top: 0px;
margin-left: 0px;
}
}
@-moz-keyframes zoom {
100% {
width: 815px;
height: 1050px;
margin-left: -277px;
margin-top: -350px;
}
0% {
width: 200px;
height:255px;
margin-top: 0px;
margin-left: 0px;
}
}

<div class='imageInner'>

<img class='imgInner zoomInner' src='ADD-URL-IMAGE-HERE' alt='' />

</div>Lebar & tinggi image sangat berpengaruh pada var margin n efek keyframe.

Flash Image Effect use Pure CSS3

Karena trik ini menurut saya lumayan sulit, maka demo dan ramuan bisa lewat download :D

Happy coding \m/