Bagaimana untuk membuat: Judul gambar penambahan

Halaman sebelumnya Penggandaan layar lapisan penyangga
Halaman berikutnya Ikon layar lapisan penyangga

Belajar bagaimana untuk membuat judul gambar penambahan saat kursor di atas.

Judul gambar penambahan

Tempatkan kursor di atas gambar, untuk melihat efect penambahan.

Nama saya Bill

Cuba sendiri

Bagaimana untuk membuat judul gambar penambahan

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 ditempatkan lapisan. Sesuaikan lebar menurut kebutuhan */
.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}
/* Membuat gambar dapat merespon */
.image {
  display: block;
  width: 100%;
  height: auto;
}
/* Efect penambahan - 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 dilihat */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}
/* Apabila anda menempatkan kursor di atas kontainer, judul penambahan akan masuk ke dalam warna gelap */
.container:hover .overlay {
  opacity: 1;
}

Cuba sendiri