Demonya
Apa kabar Sobatku semua,,Semoga sobatku Rama, Farixsan, Aby, pokoknya semua dah tanpa terkecuali.. dalam keadaan sehat walafiat & banyak rejekinya hehehe..
Masih tentang CSS lagi yang coba ane share kali ini, Yaitu Menggunakan CSS Ease-Out Untuk Membuat Semua Gambar diblog Otomatis Membesar Bila diSentuh Cursor.
Kalau yang sebelumnya saya juga pernah ngeshare Membuat gambar menjadi besar bila dilalui Cursor namun tidak Otomatis seperti pada Postingan kali ini
Langsung Sobat berikut Langkah2 nya ;
Masih tentang CSS lagi yang coba ane share kali ini, Yaitu Menggunakan CSS Ease-Out Untuk Membuat Semua Gambar diblog Otomatis Membesar Bila diSentuh Cursor.
Kalau yang sebelumnya saya juga pernah ngeshare Membuat gambar menjadi besar bila dilalui Cursor namun tidak Otomatis seperti pada Postingan kali ini
Langsung Sobat berikut Langkah2 nya ;
Kodenya
.post-body img { padding: 8px;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition:all 2s ease-out;-moz-transition:all 2s ease-out;-o-transition:all 2s ;opacity:0.4;margin:0 10px 5px 0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border:2px inset #424242;box-shadow:0px 0px 30px #fff;-webkit-box-shadow:0px 0px 30px #fff;-moz-box-shadow:0px 0px 30px #fff;
}
.post-body img:hover{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border:2px dotted #FF0000;box-shadow:0px 0px 30px #F80505;-webkit-box-shadow:0px 0px 30px #F80505;-moz-box-shadow:0px 0px 30px #F80505;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);opacity:1;
}
Berikut Cara pemasangannya :}
.post-body img:hover{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border:2px dotted #FF0000;box-shadow:0px 0px 30px #F80505;-webkit-box-shadow:0px 0px 30px #F80505;-moz-box-shadow:0px 0px 30px #F80505;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);opacity:1;
}
- Login ke Blog Sobat
- Pilih Rancangan Lalu Klik Edit HTML
- Cari kode .post-body img
- Lalu ganti dengan Kode diatas
- Bila kode .post-body img tidak ada, Letakkan saja Kodenya, diatas kode ]]></b:skin>
- Rubah Variabel2nya dan kode2 warnanya biar lebih menarik
- Lalu Simpan
Semoga bermanfaat
Posted On : 19 Desember 2011 Time : 16.53
