Membuat Efek Hover Pada Image Caption Menggunakan CSS – Bagi kalian yang belum tau apa itu hover, hover adalah properti CSS yang bisa kita manfaatkan dalam menambahkan efek terhadap suatu elemen ataupun objek. Contoh yang sering diterapkan atau digunakan adalah menambahkan efek perubahan warna, jenis huruf, efek rotasi, dan efek lainnya. Di tutorial kali ini, kamu akan mempelajari bagaimana cara membuat efek hover pada image caption menggunakan CSS. Simak kode berikut agar kamu lebih paham mengenai cara pembuatannya.

Kode HTML

Pertama, ketikan atau salin kode HTML sederhana berikut sebagai struktur dasar untuk menambahkan gambar dan caption.

<html>
<head>
  <title>Membuat Efek Hover Pada Image Caption</title>
</head>
<body>
  <div class="container">
    <figure>
      <img src="https://www.inpows.com/media/2020/01/cropped-Logo-Inpows-2.png">
      <figcaption>
        User 1
      </figcaption>
    </figure>
    <figure>
      <img src="https://www.inpows.com/media/2020/01/cropped-Logo-Inpows-2.png">
      <figcaption>
        User 2
      </figcaption>
    </figure>
    <figure>
      <img src="https://www.inpows.com/media/2020/01/cropped-Logo-Inpows-2.png">
      <figcaption>
        User 3
      </figcaption>
    </figure>
  </div>
</body>
</html>

Kode CSS

Kedua, kamu harus membuat sintak CSS untuk efek hover seperti dibawah.

body{
  background-color: #000;
}

.container{
  display: flex;
  justify-content: space-around;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

figure{
  width: 5rem;
  height: 5rem;
  clip-path: circle(50% at 50% 50%);
  cursor: pointer;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  transform: scale(0.75);
  transition: all 0.4s ease;
}

figcaption{
  color: white;
  font-size: 0.9rem;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  transition: all 0.6s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
}

figure:hover img{
  transform: scale(0.5);
  filter: blur(4px) brightness(70%);
}

figure:hover figcaption{
  opacity: 1;
  transform: translate(-50%, -50%);
}

Setelah selesai dengan semua sintak HTML dan CSS, kamu bisa menyimpan file tersebut dan kemudian membuka pada browser yang kamu gunakan untuk melihat hasilnya. Disini saya juga menyiapkan demo menggunakan JSFiddle yang bisa kamu coba langsung dibawah.

Sekian tutorial sederhana mengenai Membuat Efek Hover Pada Image Caption Menggunakan CSS, semoga tutorial kali ini dapat membantu pengetahuan coding kamu dalam membuat efek dan animasi CSS. Selamat mencoba dan tunggu tutorial menarik lainnya.