30.1.15
41
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


CSS hover image


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

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 >>
= TERIMA KASIH =

41 komentar

  1. Wahh keren binggitttt x-)

    BalasHapus
  2. photonya tu loh yg bkin tmbah keren ..hehe

    BalasHapus
    Balasan
    1. tuh mas dindin, kata mas fiu fotonya mas dindin keren.!

      Hapus
    2. Kok photonya mas dindin sih ... ih ..... hahaha

      Hapus
  3. wah keren nich... izin simpan ya kodenya :)

    BalasHapus
    Balasan
    1. silahkan mbak erna, tapi jangan lama-lama takutnya basi kalo kelamaan :d

      Hapus
  4. ondE mandE..!
    alamaaak..!..
    ampuun DJ...!..
    Beta nda kukuu... konsentrasi langsung ilang... nyerah.. melambai ke kamera..!

    BalasHapus
  5. bisa bergoyang-goyang ya :)

    BalasHapus
  6. keren mbak Dev, kumpulan link efek hover ada disini, ijin nyontek mbak Dev, Ma acih..

    BalasHapus
  7. Ok.. makasi atas tutor efek hovernya..! sukses
    sy 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..!,

    BalasHapus
    Balasan
    1. judul yang ada efek2 tulisan ..judulnya apa ya..?
      kayak ituh ..ada efek emboss..dst..
      kalo nda salah post lama.. Vy..

      Hapus
    2. membuat bayangan teks dengan CSS text-shadow:

      » Membuat Efek Tulisan Dengan CSS Text Shadow

      Hapus
    3. 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:

      :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
      }

      Hapus
    4. iyya.. sdh terbentuk sperti daun..! :>)

      Hapus
    5. agar lipatan kedua belah sisi sama, tambahkan kode ini mas:

      :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

      Hapus
    6. sepertiny sdh buntu.., ntr dulu ya..!
      biasanya.. klw sdh liat demoshownya.. pasti langsung segaar..!:)

      Hapus
  8. 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

    Ijin borong semua kode CSS nya ya mbak Devy, siapa tahu besok-besok bisa digunakan di blog jelek saya.

    BalasHapus
    Balasan
    1. gambarnya devy ambil dari laci lemari di kamar mas, kebetulan masih ada koleksi foto-foto tahun lalu, hehe..

      kalau semua mau diborong, ntar devy kasih diskon mas, karena membeli dalam jumlah banyak, hehe...

      Hapus
  9. 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

    BalasHapus
  10. keren banget mbak, bisa bergerak-gerak :d

    BalasHapus
  11. Mohon ijin buat nyimak dulu, soalnya masih pemula dalam urusan script

    BalasHapus
    Balasan
    1. ijin diterima mas, silahkan disimak secara pelan-pelan saja...(kayak lagu kotak dech)
      hehe...!!

      Hapus
  12. ijin copy codenya mbak buat belajar.. :)

    BalasHapus
  13. Luar 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 :-?

    BalasHapus
    Balasan
    1. edit pada kode ini mas:

      .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>

      Hapus
    2. oke sudah berhasil... terimakasih mba (o)

      Hapus
  14. mending saya malam mingguan saja dech mbak cz pusing abis liat kkodenya (c)

    BalasHapus
  15. keren :D
    aku bookmarks dulu mbak :D
    bermanfaat banget :)

    BalasHapus
    Balasan
    1. wah bukannya gak boleh di BM sih mas, takutnya sudah disimpan terus filenya hilang atau rusak lagi, gimana donk.??
      hehe..

      Hapus
  16. pemakaian yang jlimet ternyata diperjelas dengan jawaban di komentar konsep efek hover css nya hingga dengan paham saya mudah menerapkannya diblog butut saya.
    haturnuhun ya neng... b-( inilah akibat dari gara-gara manggil neng

    BalasHapus
  17. wah..kalo css saya tidak terlalu paham dech....
    keep happy blogging always...salam dari Makassar :-)

    BalasHapus
    Balasan
    1. 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

      Hapus
    2. selain 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..

      mbah dinan mau gak, enak tau, apalagi masakan mama, hmmmm....nyammiii..!!

      Hapus
  18. Terima kasih untuk ulasannya Mbak. Sangat membantu :)

    BalasHapus
  19. itu 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

    BalasHapus
    Balasan
    1. benar 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,..

      salam sukses mbah.

      Hapus
  20. kalo gambar yang mau di kasih efek hover gmna min coding nya ?
    maaf newbee

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK