13 May 2012

Memberi Efek Zoom Pada Gambar Posting Blog

Dalam posting ini saya ingin membagikan trik sederhana tentang cara memberi atau memasang efek zoom pada gambar yang ada diposting blog dan untuk lebih jelasnya silahkan lihat demonya dibawah ini :


Nah untuk pemasangannya silahkan tambahkan kode dibawah ini sebelum kode ]]></b:skin>

.post img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.post img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

0 comments:

Post a Comment

Jika ada yang perlu ditanyakan silahkan kalian meninggalkan komentar mengenai posting diatas, dikotak komentar dibawah ini Okey..!!
"Jangan berkomentar sebagai Anonymous sebaiknya gunakan URL Facebook kalian, jika kalian tidak mempunyai sebuah blog/website saat berkomentar"