3 Efek Hover Css Keren!

Hover adalah salah satu element css. Hover ini berguna untuk membuat efek saat mouse mengenai suatu element HTML. Contoh codenya adalah "a:hover". "a" adalah, element <a></a> yaitu element link. Bila mouse/pointer menyentuh link, maka link tersebut akan berubah sesuai yang dituliskan kode a:hovernya.

Ok, cukup penjelasannya ya. Nah, pada artikel ini, saya akan memberikan 3 Efek Hover Css yang amat keren. Berikut 3 Efek Hover Css Keren!

Box Shadow

Yang satu ini akan memberikan "box-shadow" pada saat Hover (div).
element:hover {
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 0.5px rgba(0,0,0,0.5);
}
Contoh Hasil:

Ini merupakan salah satu contoh
Hover Css Box Shadow. Cobalah
sobat sentuh teks ini dan lihat hasilnya!

Opacity (Transparent)

Dengan Css Hover ini akan membuat suatu element (div) menjadi keren, terutama pada gambar.
element {
opacity:0.5;
}
element:hover {
opacity:1;
}
Contoh Hasil:


Posisi

Maksudnya adalah, ketika suatu element di "hover", maka posisinya akan berubah.
element {
padding-left:0;
-webkit-transition: all 0.5s ease-in-out;
}
element:hover {
padding-left:5px;
-webkit-transition: all 0.5s ease-in-out;
}
Contoh Hasil:

Coba Sobat sentuh teks ini dengan pointer dan lihat hasilnya!

NB!!!:
Ganti teks "element" dengan element HTML yang akan di beri effect Css! Contoh:#element (berarti: <div id="element">) atau .element (berarti: <div class="element">) !!

Bagaimana sobat? Keren 'kan hasilnya? Yah... semoga bermanfaat deh... Sekian dari saya, selamat mencoba!!!

Bila ada script tidak berfungsi, harap laporakan :)

Sumber Referensi: Bavotasan.com

16 comments :

  1. Wew, keren sob.... :)
    #comment back ya.... :)

    ReplyDelete
  2. Wahh asyik nih bang seno,izin mau aku pelajari dulu ya bang..hahahyyy

    ReplyDelete
  3. masih bingung
    ga ngerti apa itu css
    klo counter strike ngerti sob, hehe :D

    ReplyDelete
    Replies
    1. haha.. mainnya game mulu ya... Css itu singkatan dari cascading style sheets yang berfungsi untuk memodif element HTML

      Delete
  4. .: nice share Mas Broo, counter strike lah...(he...he...he).

    ReplyDelete
  5. wah, keren kang, mau ikutan nyoba ah, siapa tau cocok sama template aku hheehe

    ReplyDelete
  6. mantap sob,,,
    Ijin nyoba dl aja nich tutor..
    :D

    ReplyDelete
  7. Wah iya sob keren bgt udh dicoba mantap, tp saya hapus lagi biarin aja blog saya minimalis.
    thanks sob

    ReplyDelete
  8. saya coba yach sob makasih infonya...

    ReplyDelete
  9. Bisa dicoba nih, makasih udah share :)

    ReplyDelete
  10. Thanks mas guru informasi ilmunya sangat mengenai saya yg sdg blajar... mohon doanya mas guru spy sy bisa jdi programer web .

    ReplyDelete