Tutorial Belajar CSS Bagian 44 : Cara Menggunakan Property Hover di CSS

0
717

Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 43 : Cara Menggunakan Property Color di CSS. Pada tutorial ini kita aka belajar cara menggunakan property hover di CSS untuk memberikan sebuah efek animasi pada desain website.

Selector :hover berfungsi untuk memilih elemen saat kita menggerakkan mouse ke atasnya. Ini tidak hanya terbatas pada tautan.

Kita dapat menggunakannya di hampir setiap elemen HTML. Untuk menata tautan ke halaman yang belum dikunjungi, kita dapat menggunakan selector :link.

Untuk menata tautan untuk halaman yang dikunjungi, kita dapat menggunakan pemilih :visited dan untuk menata tautan aktif kita dapat menggunakan pemilih :active.

Selector ini diperkenalkan di CSS1. Arahkan kursor dapat digunakan untuk menyorot halaman web sesuai preferensi pengguna dalam program perancangan web yang efektif.

Fitur hover mencakup efek berikut:

  • Ubah warna latar belakang dan font.
  • Ubah opasitas gambar.
  • Penyematan teks.
  • Buat efek rollover gambar.
  • Pertukaran gambar.
CATATAN: Untuk membuat hover efektif, kita harus mendeklarasikannya setelah pemilih :link dan :visited jika ada dalam definisi CSS.

Pada dasarnya, efek hover memodifikasi nilai properti elemen untuk mengaktifkan perubahan animasi pada gambar/teks yang dinyatakan atau elemen terkait. Menyematkan elemen hover di halaman web menjadikannya interaktif dan fungsional.

Secara umum, fitur hover kompatibel dengan semua browser utama. Namun, memang agak repot untuk mengimplementasikannya pada layer sentuh.

Sintaksis

:hover { 

  css declarations; 

}

Mari kita pahami dengan menggunakan beberapa ilustrasi.

Contoh 1 : Merubah warna link pada hover dengan menggunakan CSS

Mari kita lihat bagaimana warna tautan berubah saat kita menempatkan kursor di atasnya. Ini akan menciptakan sebuah efek, dan penerapannya mudah saat kita menggunakan CSS.

<html>  
<head>  
   <style>  
      body{  
         text-align:center;  
      }  
      a  
      {  
          color: red;  
      }  
      a:hover   
      {   
         color: green;   
      }              
      a:active  
      {  
      color: cyan;  
      }  
   </style>  
 </head>  
 <body>  
    <h1> Gerakkan mouse Anda pada link di bawah ini untuk melihat hover effect.</h1>  
    <a class = "link" href = https://mbahwp.com/category/coding/css/ >CSS</a>  
 </body>  
</html>  

Hasil dari kode di atas adalah :

Contoh 2 : Terapkan hover pada paragraf, heading dan link

<html>  
<head>  
<style>  
   body{  
      text-align:center;  
   }  
   p:hover, h1:hover, a:hover{  
      background-color: yellow;  
   }  
</style>  
</head>  
<body>  
   <h1>Halo dunia</h1>  
   <p>Selamat datang di Mbah WP.</p>  
   <a href=' https://mbahwp.com/category/coding/css/'>CSS Grid</a>  
</body>  
</html>

Hasil dari kode di atas :

Contoh 3 : teks overlay pada hover gambar

Kode CSS ini menampilkan teks pada gambar selama mouse hover. Mari kita lihat efek overlay gambar selama mouse hover.

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="width=device-width, initial-scale=1">  
<style>  
   body{  
      text-align:center;  
   }  
   * {box-sizing: border-box;}  
  
  .container {  
    position: relative;  
    width: 50%;  
    max-width: 300px;  
  }  
  
  .image {  
    display: block;  
    width: 100%;  
    height: auto;  
  }  
  
  .overlay {  
    position: absolute;   
    bottom: 0;   
    background: rgba(0, 0, 0, 0.2);   
    width: 100%;  
    opacity:0;   
    transition: .9s ease;  
    font-size: 25px;  
    padding: 20px;  
  }  
  
  .container:hover .overlay {  
    opacity: 1.5;  
  }  
</style>  
</head>  
<body>  
  <h1>Efek Overlay Judul Pada Gambar</h1>  
  <h2> Gerakkan mouse Anda ke atas gambar untuk melihat effect.</h2>  
  <center>  
  <div class="container">  
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyu0ClgqOojjQiBh6zqnkaH7B4SumOaLymUQ&usqp=CAU" class="image">  
  <div class="overlay">Selamat datang di Mbah WP</div>  
  </div> </center>  
</body>  
</html>

Hasil dari kode di atas adalah :

Semoga tutorial ini membantu Anda untuk belajar cara menggunakan property hover untuk memberikan efek bagi desain website.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.