Advertise

Hover Background Transitions CSS3

Transitions dalam CSS3 bisa diartikan sebagai perubahan warna yang bisa kita gunakan untuk merubah warna background pada bagian element halaman tertentu. Transition ini mungkin hampir sama dengan hover pada tautan link yaitu ketika mouse menyentuh link maka link tersebut bisa berubah warna, teks, ataupun backgroundnya sesuai dengan pengaturan tautan link anda.

Saya coba membuat Transitions CSS3 ini pada bagian Body komentar, untuk contoh silahkan arahkan kursor mouse anda pada bagian body komentar di blog ini. Pada saat kursor menyentuh bagian body comentar, background body comentar akan berubah warna.

Untuk cara pembuatan Transitions CSS3 ini bisa langsung ikuti caranya di bawah ini.

Pertama masuk pada Edit HTML
Cari kode seperti dibawah ini

#comments-block .comment-body {
background-color: #DEB887;
margin:.25em 0 0;
}

Tambahkan kode Transitions CSS3 seperti ini.

background-color: #DEB887;
-o-transition-property: background-color;
-o-transition-duration: 1s;
}

Lanjutkan dengan menambahkan kode Hover Transitions nya seperti di bawah ini. letakan tepat dibawah kode di atas.

#comments-block .comment-body:hover { background-color:#b0b0b0; }

Maka hasil kode keseluruhan akan seperti ini.

#comments-block .comment-body {
background-color: #DEB887;
-o-transition-property: background-color;
-o-transition-duration: 1s;
margin:.25em 0 0;
}

#comments-block .comment-body:hover { background-color:#b0b0b0; }

Jika sudah silahkan di save dan anda lihat hasilnya.

Transitions ini bisa juga di terapkan pada bagian bagian posting, sidebar, foter dll. untuk caranya hampir sama dengan diatas.

NB : Silahkan ganti kode warna untuk background dasar comments-block dan hover transitions dengan mengganti teks yang di cetak tebal.
Bagian -o-transition-duration: 1s; merupakan pengaturan untuk mengatur cepat lambat pergantian transition , silahkan dirubah pada bagian "1s" semakin besar angkanya maka akan semakin lambat pergerakannya.

17 komentar:

  1. Silahkan arahkan kursor mouse pada body komentar ini.
    untuk kode body comment tentu akan berbeda dengan templte anda . Kode templte yang saya gunakan untuk contoh di atas yaitu templte MINIMA.

    Jadi silahkan disesuaikan. Selamat mencoba membuat Hover Background Transitions dengan CSS3

    BalasHapus
  2. Mantap juga nih hovernya..

    BalasHapus
  3. Wah mantabz.... hampir kaya tutorial bikin kotak komentarnya bang Hendro nie Brader hhe.... terus kembangkan Sob...

    sebelumnya maf bgt nie brader aku baru bisa mampir hhe.. Semangat n Happy blogging Sob...

    BalasHapus
  4. keren banget mas..
    hebat..hebat...

    bisa dicoba ntr mas

    BalasHapus
  5. Ilmunya bagus banget. Sama,punya saya juga pakai template minima,bisa tak praktikkan sahabat.

    BalasHapus
  6. Kalau untuk commentnya khusus admin bisa gak nich tutorialnya diterapkan?

    BalasHapus
  7. Belajar CorelDRAW :: Kebetulan saya tidak memasang comment khusus admin jadi belum saya coba menerapkan Transitions, mungkin akan saya coba nanti. trimakasih

    BalasHapus
  8. wah kupake di tempatku koq yg berubah warna cuma border ya brad?...masih sama persis warna sama disini...cuman border aja yg brubah saat kursor di dekatkan...gmn tu ya brad?

    BalasHapus
  9. Belantara Indonesia :: Coba bordernya dihilangkan dulu brader. jangan mengguakan border dahulu. dicek lagi brader.

    BalasHapus
  10. Belantara Indonesia :: Setelah saya cek code template si brader, ternyata si brader salah memasukan kode transitionnya. kode si brader seperti ini

    #comments-block .comment-body p{background-color: #DEB887;
    -o-transition-property: background-color;
    -o-transition-duration: 1s;
    margin:0 0 0.75em}#comments-block .comment-body:hover { background-color:#b0b0b0; }

    Aturan si brader memasukan kode transitionnya pada
    #comments-block .comment-body{

    bukan yang ini

    #comments-block .comment-body p{

    Diteliti lagi brader...codenya template si brader terlalu rapat jadi harus teliti dalam melihatya.

    BalasHapus
  11. oke dah aku ulangi...thx master....kekekkekee

    BalasHapus
  12. sudah terlaksana..tinggal mau bikin kotaknya ber hover ni...

    BalasHapus
  13. wah kren sob hmmm boleh juga nech kalo dicoba biar ketularan kren hehe
    Sukses Slalu!

    BalasHapus
  14. aku save dulu ya bwt diplajari

    mampir sob ada update Fenomena Telur Berdiri nih...

    BalasHapus
  15. wah bagus ni..!!ini yang saya cari2.
    makasih yaa...tipsnya.

    BalasHapus
  16. jadi keren nih kotak komentarnya pengunjungnya, bisa berubah2 warna. manteb deh.

    BalasHapus