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