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:
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:
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:
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:
<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>
.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:
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 x-)
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 :d
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:
Hapus:hover {
background: red;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
/*lalu atur nilai width dan height sesuai size font...*/
/*misal seperti ini:../*
width: 100px;
height: 100px
}
iyya.. sdh terbentuk sperti daun..! :>)
Hapusagar lipatan kedua belah sisi sama, tambahkan kode ini mas:
Hapus:hover {
border-bottom-left-radius: 100px;
border-top-right-radius: 100px;
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-top
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. :d
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 :d
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 (o) kalo background gambarnya dirubah menjadi teks aja gimana merubahnya mba? di demo momer 3 :-?
BalasHapusedit pada kode ini mas:
Hapus.demo3 {
background: url(URL-Gambar Anda.jpg); >>
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 240px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 320px;
border:3px double #fff}
lihat arah pada pada kode background, hapus saja kode itu, lalu ganti pemanggil HTML-nya menjadi seperti ini:
<div class="demo3">
...Letakkan Teks Anda Disini...
<div class="border">
</div>
<div class="info">Info</div>
<div class="text">
<h2>SAHABAT BLOGGER 77</h2>
<p>..Tulis Sesuatu Disisni..</p>
</div>
</div>
oke sudah berhasil... terimakasih mba (o)
Hapusmending saya malam mingguan saja dech mbak cz pusing abis liat kkodenya (c)
BalasHapuskeren :D
BalasHapusaku bookmarks dulu mbak :D
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.
BalasHapushaturnuhun ya neng... b-( inilah akibat dari gara-gara manggil 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