Beberapa contoh style efek dengan konsep CSS hover dapat Anda pelajari disini:
- Menampilkan Bayangan Teks Saat Hover
- Efek Tumpukan Kertas Pada Laman Posting
- Membuat Link Hover Efek Rolling Right
- Mengontrol Efek Gerak Dengan Perintah Hover
- Tombol Hover Dengan 4 Style Effect
- Widget Profil Penulis Dengan Background Blur Efek
- 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:
.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:
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:
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= Konsep Membuat Efek Hover Dengan CSS
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
Wahh keren binggitttt
BalasHapusapanya mas yang keren.!!?
Hapusadminnya kerenz ya mas
Hapusphotonya tu loh yg bkin tmbah keren ..hehe
BalasHapustuh mas dindin, kata mas fiu fotonya mas dindin keren.!
HapusKok photonya mas dindin sih ... ih ..... hahaha
Hapuswah keren nich... izin simpan ya kodenya
BalasHapussilahkan mbak erna, tapi jangan lama-lama takutnya basi kalo kelamaan
Hapusok mas
HapusondE mandE..!
BalasHapusalamaaak..!..
ampuun DJ...!..
Beta nda kukuu... konsentrasi langsung ilang... nyerah.. melambai ke kamera..!
bisa bergoyang-goyang ya
BalasHapuskeren mbak Dev, kumpulan link efek hover ada disini, ijin nyontek mbak Dev, Ma acih..
BalasHapusOk.. makasi atas tutor efek hovernya..! sukses
BalasHapussy ilangkan garis bingkai, dan saat dihover, efek latarnya bekerja dgn baik Vy..
oiyya Vy.. mau nanya..!
/*nilai perubahan*/
//background: red;// sy mau ganti pake warna latar seperti pada menu style daun, kenapa tidak bisa diterapkan ya..?
Dan juga.. kalao posisi efek hovernya, ingin disesuaikan dgn tinggi header bagaimana ya..?
untuk lebih jelasnya.. mohon liat ya di head..
tengkyu sebelumnya ya Vy..!,
judul yang ada efek2 tulisan ..judulnya apa ya..?
Hapuskayak ituh ..ada efek emboss..dst..
kalo nda salah post lama.. Vy..
membuat bayangan teks dengan CSS text-shadow:
Hapus» Membuat Efek Tulisan Dengan CSS Text Shadow
bukannya gak bisa mas, tampilan background saya ambil standar (persegi) tanpa nilai width dan height, jika ingin membuat bentuknya menjadi sepeti bulatan daun, mas tambahkan CSS border-radius, namun hanya mengatur pada dimensi sisi kanan dan kiri, contoh seperti ini:
Hapusiyya.. sdh terbentuk sperti daun..!
Hapusagar lipatan kedua belah sisi sama, tambahkan kode ini mas:
lalu ubah nilai line-height menjadi normal » font: bold 15px/normal Verdana,serif; lalu ganti dengan padding:8px 12px.
agar tinggi title sesuai dengan tinggi header-page, lihat pada margin-topHapus
sepertiny sdh buntu.., ntr dulu ya..!
Hapusbiasanya.. klw sdh liat demoshownya.. pasti langsung segaar..!:)
Keren-keren bingitz ya mbak demo show nya. Saya lebih suka background demo show 1 dan 2 sebelum di efek hover Mbak Devy Indriyani. Btw itu mbak Devy bisa dapat gambar bidadari dari mana ya.
BalasHapusIjin borong semua kode CSS nya ya mbak Devy, siapa tahu besok-besok bisa digunakan di blog jelek saya.
gambarnya devy ambil dari laci lemari di kamar mas, kebetulan masih ada koleksi foto-foto tahun lalu, hehe..
Hapuskalau semua mau diborong, ntar devy kasih diskon mas, karena membeli dalam jumlah banyak, hehe...
wahhh kerenn ini mbak efek hover dengan CSS nya apalagi demo nya pas kursor mouse di dekatkan dengan objek gambar tulisan pun muncul beuhh sungguh kreatif
BalasHapuskeren banget mbak, bisa bergerak-gerak
BalasHapusapanya yang bergerak-gerak mas.?
HapusMohon ijin buat nyimak dulu, soalnya masih pemula dalam urusan script
BalasHapusijin diterima mas, silahkan disimak secara pelan-pelan saja...(kayak lagu kotak dech)
Hapushehe...!!
ijin copy codenya mbak buat belajar..
BalasHapusLuar biasa nih mba devi, Konsep css nya diluar penalaran saya.. abis bagus bgt liat beberapa efek hovernya
kalo background gambarnya dirubah menjadi teks aja gimana merubahnya mba? di demo momer 3 
BalasHapusedit pada kode ini mas:
lihat arah pada pada kode background, hapus saja kode itu, lalu ganti pemanggil HTML-nya menjadi seperti ini:
Hapus
oke sudah berhasil... terimakasih mba
Hapusmending saya malam mingguan saja dech mbak cz pusing abis liat kkodenya
BalasHapuskeren


BalasHapusaku bookmarks dulu mbak
bermanfaat banget
wah bukannya gak boleh di BM sih mas, takutnya sudah disimpan terus filenya hilang atau rusak lagi, gimana donk.??
Hapushehe..
pemakaian yang jlimet ternyata diperjelas dengan jawaban di komentar konsep efek hover css nya hingga dengan paham saya mudah menerapkannya diblog butut saya.
inilah akibat dari gara-gara manggil neng
BalasHapushaturnuhun ya neng...
wah..kalo css saya tidak terlalu paham dech....
BalasHapuskeep happy blogging always...salam dari Makassar
jauh juga ya main ke sini dari makasar cuma buat lihat efek hover doang...ok deh happy blogging juga....saya wakilin dulu mbak devinya bang hariyanto....dia lagi masak lontong di dapur...heheee
Hapusselain jago dalam urusan koding, ternyata mbah dinan ada bakat juga jadi peramal, soalnya tebakannya BENAR, devy lagi masak lontong sayur sama mama tadi didapur, hehe..
Hapusmbah dinan mau gak, enak tau, apalagi masakan mama, hmmmm....nyammiii..!!
Terima kasih untuk ulasannya Mbak. Sangat membantu
BalasHapusitu demo bagus dibuat profil pengganti google profil ya dev...memang sekarang udah mulai banyak yang menggunakan hover, selain tampilannya menarik dan juga terkesan gaya sista....apalagi kalau ente yang garap...percaya deh...salute...heheeee...ok saya surfing dulu ke beberapa artikel di blog ini...buat nyari ilmu danpencarahan...doa selamat di jalan ya sista...hehheeeee. makasih
BalasHapusbenar sekali mbah, Efek Hover kesannya membuat pengunjung kaget apabila menyentuh sesuatu didalam blog yang disisipkan efek hover, apalgi kalau dihubungkan dengan tampilan gambar, gak sengaja panah mouse melintasi gambar orang menyanyi, ehh..gambarnya berubah menjadi orang menangis, hehe,..
Hapussalam sukses mbah.
kalo gambar yang mau di kasih efek hover gmna min coding nya ?
BalasHapusmaaf newbee
Silahkan KLIK gambar untuk melihat kode
TERIMA KASIH