Efek hover adalah animasi yang terjadi ketika pengguna mengarahkan pointer mouse ke suatu elemen. Dalam tutorial ini, kita akan membuat efek hover yang menarik pada teks menggunakan HTML dan CSS.

Langkah 1: Membuat Struktur HTML

Buatlah file HTML dengan nama index.html. Di dalam file ini, kita akan menambahkan struktur dasar HTML beserta elemen yang akan kita beri efek hover.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hover Text</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="hover-text">Hover ke arah sini!</div>
</body>
</html>

Penjelasan:
  • DOCTYPE: Menentukan tipe dokumen sebagai HTML5.
  • html lang="en": Menetapkan bahasa halaman sebagai Inggris.
  • meta charset="UTF-8": Menetapkan karakter encoding sebagai UTF-8.
  • meta name="viewport" content="width=device-width, initial-scale=1.0": Memastikan tampilan responsif di perangkat mobile.
  • title: Judul halaman.
  • link rel="stylesheet" href="styles.css": Menghubungkan file CSS eksternal.
  • body: Bagian konten utama.
  • div class="hover-text": Elemen div dengan teks yang akan diberi efek hover.

Langkah 2: Menambahkan Gaya CSS

Buatlah file CSS dengan nama styles.css. Di dalam file ini, kita akan menambahkan gaya dasar dan efek hover.


body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #FFF;
}

.hover-text {
    font-size: 2em;
    color: #333;
    transition: color 0.3s, transform 0.3s;
}

.hover-text:hover {
    color: #FF0000;
    transform: scale(1.2);
}

Penjelasan:
  • body: Mengatur tampilan halaman menjadi fleksibel, menempatkan konten di tengah secara vertikal dan horizontal, menetapkan tinggi halaman 100% viewport height, dan memberikan warna latar belakang abu-abu muda.
  • hover-text: Mengatur ukuran font teks, warna teks, dan menambahkan transisi pada perubahan warna dan transformasi selama 0.3 detik.
  • hover-text:hover: Mengatur efek hover, mengubah warna teks menjadi oranye (#FF0000) dan memperbesar ukuran teks dengan transformasi skala 1.2.

Langkah 3: Melihat Hasil

Buka file index.html di browser. Arahkan pointer mouse ke teks "Hover ke arah sini!" dan kamu akan melihat efek hover yang telah kita buat.

Penjelasan Efek
  • transition: Properti CSS yang mengatur efek transisi pada elemen. Di sini kita mengatur transisi pada perubahan warna dan transformasi.
  • color: Mengatur warna teks.
  • transform: Mengatur perubahan skala elemen. scale(1.2) memperbesar elemen 1.2 kali dari ukuran aslinya.

Kesimpulan

Dalam tutorial ini, kita telah belajar cara membuat efek hover yang menarik pada teks menggunakan HTML dan CSS. Efek ini menambah interaktivitas dan daya tarik visual pada halaman web kamu. kamu dapat mencoba variasi lain seperti mengubah font, warna, atau menambahkan animasi lain untuk membuat efek hover yang lebih menarik.