Konsep Membuat Efek Hover Dengan CSS

Konsep Membuat Efek Hover Dengan CSS - Hover merupakan gerakan atau perubahan yang terjadi pada sebuah objek apabila area objek tersebut dilintasi atau disentuh oleh mouse (panah mouse). Sedangkan konsep untuk membuat model gerakan dapat kita bentuk dengan CSS transisi dan animasi, sehingga saat cursor menyentuh area dimana objek tersebut berada, maka gerakan akan tercipta sesuai dengan konsep CSS yang sudah kita susun dan tentukan nilainya pada masing-masing deklarasi elemen :hover.

Beberapa contoh style efek dengan konsep CSS hover dapat Anda pelajari disini:

1. Menampilkan Bayangan Teks Saat Hover
2. Efek Tumpukan Kertas Pada Laman Posting
3. Membuat Link Hover Efek Rolling Right
4. Mengontrol Efek Gerak Dengan Perintah Hover
5. Tombol Hover Dengan 4 Style Effect
6. Widget Profil Penulis Dengan Background Blur Efek
7. About Profile With Hover Effect

Semudah saat Anda memberikan warna yang berbeda pada link, misalnya dengan konsep CSS seperti ini- a:link {color:red} a:hover {color:blue}, maka teks link berwarna MERAH dan akan berubah menjadi warna BIRU saat di hover. Hal yang perlu diperhatikan untuk membuat efek hover dengan CSS adalah nilai perubahan, dan apapun yang akan Anda tampilkan sebagai nilai efeknya, maka letakkan semua pekerjaan Anda pada area elemen :hover. Sebagai contoh kita membuat efek skew (tulisan akan miring jika di hover), maka yang harus kita lakukan hanya menyusun konsep CSS-nya seperti ini:

<style type'text/css'>
.devy {
  margin: 0 auto;
  width:250px;
  border:solid 2px red;
  border-radius: 5px;
  color: #111;
  font: bold 15px/40px Verdana,serif;
  text-shadow: 1px 2px 1px red;
  text-align:center;
  transition: all 0.8s;
  -moz-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -o-transition: all 0.8s}

.devy:hover {
  /*nilai perubahan*/
  background: red;
  color: #fff;
  text-shadow: 1px 2px 2px #111;
  transform:rotate(20deg);
  -webkit-transform:rotate(20deg);
  -moz-transform:rotate(20deg);
  box-shadow: 2px 4px 3px 2px #222}
</style>
<div class="devy">SAHABAT BLOGGER 77</div>

Hasilnya:

SAHABAT BLOGGER 77

Jika semua CSS sudah disusun dengan konsep yang benar dan akurat, maka efek yang ingin Anda tampilkan dengan perintah HOVER akan dengan mudah dikerjakan. Jika Anda ingin membuat efek hover pada sebuah objek, hal yang terpenting adalah menyusun konsep bentuk tampilannya terlebih dahulu, setelah itu hubungkan perintahnya dengan mengatur nilai-nilai perubahan apa yang akan Anda tampilkan disana, dan letakkan semua konsepnya pada elemen CSS-hover, maka hanya dengan 1 bentuk tampilan yang sama, namun Anda bisa menghasilkan efek hover yang berbeda seperti 5 Model Efek Hover Dengan CSS seperti ini:

DEMO SHOW