Cara Membuat Image Overlay Title

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 27, 2021

Di bawah ini merupakan langkah-langkah untuk membuat Image Overlay Title.

Image Overlay Title adalah judul gambar yang tidak akan terlihat jika kursor tidak digerakkan ke gambarnya. Judulnya akan terlihat ketika kursornya digerakkan ke gambarnya.

Image Overlay Title dibuat menggunakan CSS dan HTML.

Image Overlay Title

Arahkan kursor ke gambar untuk melihat efek overlay.

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {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: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Warna hitam yang tembus pandang */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.container:hover .overlay {
  opacity: 1;
}
</style>
</head>
<body>

<h2>Image Overlay Title</h2>
<p>Arahkan kursor ke atas gambar untuk melihat efeknya.</p>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Avatar" class="image">
  <div class="overlay">Namaku sebenarnya adalah Shinichi Kudou</div>
</div>

</body>
</html>

Cara Membuat Image Overlay Title

Langkah 1 Tambahkan HTML:
Contoh

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Avatar" class="image">
  <div class="overlay">Namaku sebenarnya adalah Shinichi Kudou</div>
</div>

Langkah 2 Tambahkan CSS:
Contoh

* {box-sizing: border-box}

/* Container diperlukan untuk memposisikan overlay. Sesuaikan lebarnya sesuai kebutuhan */
.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}

/* Buat gambar menjadi responsive */
.image {
  display: block;
  width: 100%;
  height: auto;
}

/* Efek overlay - diletakkan  di atas container dan di atas gambar */
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Warna hita tembus pandang */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

/* Saat akan  mengarahkan mouse ke container, pudarkan judul overlay*/
.container:hover .overlay {
  opacity: 1;
}