Text Overlay pada Gambar dengan HTML dan CSS

Posted on:Monday, August 15, 2022

Pada tulisan ini, saya akan mendokumentasikan tentang proses membuat Text Overlay pada Gambar yang saya lakukan dengan menggunakan HTML dan CSS.

Fitur ini saya gunakan pada salah satu proyek sampingan yang sedang saya kembangkan. Latar belakang saya membuat fitur ini adalah untuk memberikan deskripsi singkat terkait data yang saya tampilkan pada halaman awal proyek yang sedang dikerjakan. Ini dilakukan untuk membuat tampilan list data terlihat menjadi lebih rapih lagi dan tidak terlalu banyak informasi yang ditampilkan.

Langsung saja kita mulai!

Setup Proyek

Langkah pertama yang dilakukan adalah setup proyek. Buat sebuah folder pada direktori yang ada di perangkat komputer. Lalu buat file index.html pada folder tersebut.

Setelah itu, buat folder lagi dengan nama styles. Kemudian, buat file style.css pada folder tersebut.

Sambungkan file style.css ke dalam index.html dengan menambahkan skrip di bawah ini pada file index.html supaya style rules yang dituliskan dapat diimplementasikan ke dalam layout html yang akan dibuat nanti.

<html>
  <head>
    <link type="stylesheet" href="./styles/style.css" />
  </head>
</html>

Lalu tambahkan asset berupa gambar. Buat sebuah folder dengan nama images di dalam direktori proyek. Setelah itu, masukkan asset gambar yang sudah disiapkan ke dalam folder tersebut. Disini saya menyiapkan 4 gambar yang saya dapatkan secara acak dari internet.

Buat elemen-elemen HTML

Setelah melakukan setup proyek, langkah selanjutnya adalah dengan membuat elemen-elemen HTML-nya. Silahkan tambahkan baris kode di bawah ini ke dalam file index.html.

<div className="container">
  <div className="content__container">
    <img
      class="content__image"
      src="https://www.moneysense.ca/wp-content/uploads/2021/12/CoinSmart-dogecoin-shiba-inu-memecoins-900x550.jpg"
      alt="Two Shiba Inu"
    />
    <div class="content__overlay content__overlay--blur">
      <div class="content__overlay-title">Two Shiba Inu</div>
      <p class="content__overlay-description">Two cute shiba inu dogs.</p>
    </div>
  </div>
</div>

Terdapat dua elemen utama pada baris kode di atas. Yakni elemen gambar dan text overlaynya. Pada elemen overlay terdapat dua anak elemen yaitu overlay title dan description. Hasil yang diharapkan nantinya adalah text overlay akan ditampilkan ketika pengguna men-trigger event hover pada element gambar.

Membuat Styling Rules dengan CSS

Setelah membuat elemen-elemen HTML, selanjutnya adalah memberikan Styling Rules kepada elemen-elemen tersebut dengan menggunakan CSS. Ini dilakukan dengan memasukkan baris kode di bawah ke dalam file style.css yang ada pada folder styles.

.container {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content__container {
  position: relative;
  margin-right: 12px;
  width: 300px;
  height: 200px;
}

.content__image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 20px;
}

.content__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.25s;
}

.content__overlay--fill {
  background: purple;
}

.content__overlay--blur {
  backdrop-filter: blur(8px);
}

.content__overlay > * {
  transform: translateY(20px);
  transition: transform 0.25s;
}

.content__overlay:hover {
  opacity: 1;
}

.content__overlay:hover > * {
  transform: translateY(0);
}

.content__overlay-title {
  font-size: 18px;
  font-weight: bold;
}

.content__overlay-description {
  font-size: 14px;
  margin-top: 12px;
}

Saya akan mencoba menjelaskan styling rules yang saya tuliskan di atas. Pertama, saya membuat style untuk container terluar untuk semua elemen baik itu untuk gambar dan text overlaynya. Pada container ini, saya menambahkan margin-top untuk membuat agar tampilan dari gambar tidak terlalu menempel ke sudut atas dari browser window.

Selanjutnya menambahkan display: flex, align-items: center, dan justify-content: center supaya posisi dari gambar dan text overlaynya berada tepat di tengah-tengah browser window.

Lalu di dalam container ini saya membuat container lagi dengan class selector content__container untuk membungkus elemen gambar dan text overlaynya.

Lho, kenapa buat lagi?

Jadi, container yang kedua ini akan berguna pada kondisi elemen gambar lebih dari satu. Terdapat beberapa styling rules di dalamnya yaitu yang pertama ada position: relative.

Rules ini dibuat karna si container menjadi parent element dari elemen overlay yang memiliki styling rules position: absolute. Supaya letak dari text overlay akan selalu ada di dalam elemen container yang kedua ini.

Untuk referensi lengkapnya bisa dicek disini.

Lalu menambahkan margin-right supaya terdapat jarak antar elemen ketika pada kondisi elemen lebih dari satu.

Pada elemen gambar terdapat beberapa styling rules yang digunakan untuk mengatur lebar dan tinggi dari elemen gambar dan radius pada bordernya.

Untuk elemen overlay-nya, terdapat lumayan banyak styling rules yang diterapkan. Beberapa styling rules yang diterapkan adalah untuk membuat position-nya menjadi absolute, membuat letak posisi dari elemen text nya berada di tengah, menambahkan radius pada border, set opacity-nya menjadi 0 dan membuat transition untuk opacity dengan durasi sebesar 0.25 detik.

Disini saya membuat dua tipe efek overlay yang akan dihasilkan, yaitu fill dan blur. Untuk efek overlay fill, saya membuat class selector yang bernama content__overlay—fill. Di dalamnya terdapat sebuah rule yang akan mengubah warna latar belakang atau background menjadi ungu.

Sedangkan pada efek overlay blur, saya menambahkan sebuah rule untuk membuat tampilan backgroundnya menjadi blur. Oiya, class selector untuk efek overlay ini adalah content__overlay—blur.

Cara menerapkan salah satu dari dua efek overlay ini adalah dengan menambahkan class selectornya pada elemen overlay.

Setelah membuat dua efek overlay di atas, selanjutnya adalah membuat pseudo-class untuk menerapkan styling rules ketika kursor mouse pengguna berada di area elemen overlay atau nama event nya adalah hover.

Jika melihat baris kode CSS yang dituliskan di atas, class selector dengan pseudo-class yang dimaksud adalah yang .content__overlay:hover. Di dalamnya berisi sebuah rule untuk menaikkan opacity dari element overlay menjadi 1.

Lalu dua selector terakhir yaitu .content__overlay > * dan content__overlay:hover > * ditulis untuk membuat animasi elemen overlay menjadi seperti muncul dari bawah lalu naik ke atas hingga memenuhi elemen gambar.

Akhirnya selesai!

Untuk hasilnya bisa langsung dilihat di browser kesayangan. Atau bisa lihat contoh yang saya buat.

Penutup

Itu tadi sedikit dokumentasi dari saya tentang pembuatan text overlay pada gambar. Semoga bisa berguna untuk saya dan kalian pada saat yang akan datang.

By the way, tulisan ini dibuat menggunakan Neovim. Mungkin nanti saya akan coba buat tulisan review pakai Neovim selama x hari, haha.

Makasih udah mampir, semoga kalian sehat selalu!