Css 3 Zoom In dan Zoom Out

Siang ini saya akan share tutorial tentang Animation yang di buat dengan Css 3, yaitu Zoom in dan Zoom Out. Mungkin dari sebagian master-master CSS sudah banyak yang menguasai teknik ini tapi karena saya masih newbie jadi tentunya gag apa2 saya mencoba share lagi.


Css 3 ini tentunya memang sangat menawan untuk memperindah Blog kita, jadi silahkan agan-agan coba ya, semoga berhasil dan sukses dalam mencobanya.

Contohnya seperti dibawah ini :

Berikut ini Script CSS :

#zooming{
position:relative;
height:280px;
width:280px;
padding-top:5px}
#zooming img{
position:absolute;
left:0;
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;}
#zooming img.top{
-webkit-transform:scale(0,0);opacity:0}
#zooming:hover img.top{
opacity:1;-webkit-transform:scale(1,1);
-webkit-transform-origin:center}
#zooming:hover img.bottom{
-webkit-transform:scale(0,0);
-webkit-transform-origin:center}

Add Image nya :

<div id="zooming">
<img class="bottom" src="http://i690.photobucket.com/albums/vv270/alwi/Iqbal.jpg" alt="Iqbal" width="200" height="200" />
<img class="top" src="http://i690.photobucket.com/albums/vv270/alwi/Akmal.jpg" alt="Akmal" width="200" height="100" />
</div>

Sumber dan referensi : http://m-alwi.com/css3-animation-zoom-in-zoom-out-rotation.html