Efek Zoom Gambar Saat Di Lalui Cursor



Hari ini saya Mau membahas Full tentang CSS ... kali ini saya mau membahas Efek Zoom Gambar Saat Di Cursor ,.. Pernahkah anda melihat sebuah blog seperti itu ??? jika pernah , apakah anda ingin seperti itu ?? always-sharing.com ga ingkar janji kok , cocok sama judul web nya ... :D ...yok berangkat ke step by step nya ...

Masuk ke EDIT HTML

Copas kode berikut di atas kode ]]></b:skin>

.cayunhover img{
-webkit-transform:scale(0.3); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.3); /*Mozilla scale version*/
-o-transform:scale(0.3); /*Opera scale version*/
-webkit-transition-duration: 9.9s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.cayunhover img:hover{
-webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.4); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px blue; /*Kode Css3 untuk efek shadow*/
-webkit-box-shadow:0px 0px 30px blue; /*Untuk safari*/
-moz-box-shadow:0px 0px 30px blue; /*Untuk Mozilla*/
opacity: 1;
}
Klik Save.

Untuk tes panggilan.
<div class="cayunhover">
<img src="URL GAMBAR ANDA"/>
</div>


Responses

2 Respones to "Efek Zoom Gambar Saat Di Lalui Cursor"

whitewalls mengatakan...

iso blog informatif, to the point dan edukatif...good blog....


4 Desember 2011 00.40
~Sofyan_oZ~ mengatakan...

ok , thanks mas , jangan sungkan-sungkan buat mampir lagi ...


4 Desember 2011 01.03

Posting Komentar

•Sangat Saya Hormati Jika Anda Meninggalkan Komentar di Blog ini

•Mohon Maaf Blog ini Tidak Terima Komentar yang Mengandung Sara , Spamming , Flamming

•Kritik Dan Saran Dari Pembaca Semoga Bisa Membantu Memajukan Blog Ini

Regards : ~Sofyan_oZ~

 

Statistic Blog's



Free Page Rank Tool
Return to top of page Copyright © 2012 Always-Sharing | Blogspot Tutorial | From Zero To Hero | Template by HackTutors