Sabtu, 04 Februari 2012

Membuat efek zoom (mouse hover) pada gambar di blog

Mau tahu hasilnya?
Coba arahkan mouse anda ke gambar yang ada posting ini , ... nah tahukan hasilnya ?
Mau tau caranya ? Triknya mudah kok ;

Cari kode : ]]></b:skin>

Lalu copy kode dibawah ini dan paste diatas kode tadi ;
�.post img, table.tr-caption-container� {
border:none;
max-width:560px;
height:auto;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}
Kemudian save, dan lihat hasilnya, selamat mencoba

Label:

0 Komentar:

Posting Komentar

Tinggalkan pesan anda :

Berlangganan Posting Komentar [Atom]

<< Beranda