Bagaimana cara membuat: judul overlay gambar

Halaman sebelumnya Perbesaran penambahan gambar
Halaman berikutnya Ikon penambahan gambar

Belajar cara membuat judul overlay gambar saat mouse diatas.

Judul overlay gambar

Tahapkan mouse di atas gambar, lalu lihat efek overlay.

Nama saya Bill

Coba sendiri

Bagaimana cara membuat judul overlay gambar

Langkah pertama - Tambahkan HTML:

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">Nama saya John</div>
</div>

Langkah kedua - Tambahkan CSS:

* {box-sizing: border-box}
/* Kontainer yang perlu menempatkan overlay. Sesuaikan lebar menurut kebutuhan */
.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}
/* Membuat gambar responsif */
.image {
  display: block;
  width: 100%;
  height: auto;
}
/* Efek overlay - berada di atas kontainer dan gambar */
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Hitam yang dapat melihat melalui */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}
/* Jadi saat Anda menempatkan mouse di atas kontainer, judul overlay akan masuk ke dalam pertunjukan */
.container:hover .overlay {
  opacity: 1;
}

Coba sendiri