Beberapa Trik Membuat Efek Hover

Hey guys,.. saya ingin sharing lagi nie ma teman-teman, mengenai 'Efek Hover' pada Tulisan, warna, dan Image Gambar.
sebelum kita membuat 'efek hover' pada blog kita, utta ingin menjelaskan sedikit mengenai Efek Hover ini,.. jadi disini kita cuma cukup menambahkan kode :hover pada bagian kode css yang ingin kita tambahkan efek hover.

baiklah kita langsung saja membuatnya, sobat perhatikan kode kode berikut :

Jika sobat ingin bemberikan :

-----------------------------------
HOVER PADA JUDUL POSTING
-----------------------------------
Cari kode berikut :

.post h2 {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.post h2:hover {
font-size:25px;
font-family:Tahoma,Arial,Century gothic, sans-serif;
color:#89a8af;
}

-----------------------------------
HOVER TEKS/TULISAN Pada POSTING
-----------------------------------
Cari kode berikut :

.post {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.post:hover {
font-size:16px;
font-family:Tahoma,Arial,Century gothic, sans-serif;
color:#89a8af;
}

-----------------------------------
HOVER PADA BODY POSTING
-----------------------------------
Cari kode berikut :

.post-body {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.post-body:hover {
-----
-------
}

-----------------------------------
HOVER PADA SEMUA IMAGE/GAMBAR
-----------------------------------
Cari kode berikut :

.post img {
border:1px solid #fff;
---------
}

:::Lalu tambahkan kode berikut dibawahnya :::

.post img:hover {
height:70px;
width:150px;
border:5px solid #cccccc;
}

-----------------------------------
HOVER PADA IMAGE/GAMBAR PROFIL
-----------------------------------
Cari kode berikut :

.profile-img {
height:70px;
width:150px;
border:1px solid #fff;
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.profile-img:hover {
border:5px solid #cccccc;
}

-----------------------------------
HOVER PADA TITLE JUDUL SIDEBAR
-----------------------------------
Cari kode berikut :

.sidebar h2 {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.sidebar h2:hover {
font-size:25px;
font-family:Tahoma,Arial,Century gothic, sans-serif;
color:#89a8af;
}

------------------------------------------------------------------
HOVER PADA TULISAN 'POSKAN KOMENTAR' pada bagian KOTAK KOMENTAR
------------------------------------------------------------------
Cari kode berikut :

#comments h4 {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

#comments h4:hover {
font-size:25px;
font-family:Tahoma,Arial,Century gothic, sans-serif;
color:#89a8af;
}


KET:::
Jadi inti dari cara memberikan efek Hover'Pembesaran Font/teks' dan 'Perubahan Warna' disini,.
dengan cukup dengan menambahkan kode tambahan :hover { . pada kode CSS sobat yang ingin diberi efef Hover..

Contohnya, misal kita ingin memberi efek 'Pembesaran Font/teks' dan 'Perubahan Warna' pada Judul Header maka kita cari kode berikut :

#header h1{
----
-------
-----
}

setelah ketemu, kita tinggal membuat kode css nya lagi seperti ini :

#header h1{
----
-------
-----
}

lalu kita ganti kode #header h1{ menjadi #header h1:hover { . sehingga menjadi :

#header h1:hover {
font-size:25px;
color:#89a8af;
}

jadi kita cuma menambahkan kode :hover diantaranya.

gimana??? sudah jelas kan,..hehe,.. :) utta' harap teman-teman sudah mengerti,...

Ditulis Oleh : Endy Djubu | Artikel | Beberapa Trik Membuat Efek Hover

Artikel Beberapa Trik Membuat Efek Hover ini diposting oleh Endy Djubu pada hari Selasa, 06 Maret 2012. Terimakasih atas kunjungan Anda yang telah membaca artikel ini, semoga bermanfaat untuk kita semua, Kritik dan saran nya, silahkan tulis di kotak Komentar di bawah ini, dan jangan lupa di like/suka ya.... Salam hangat dari saya 3nf1try.blogspot.com