Bagaimana membuat: efek penambahan zoom gambar

Halaman sebelumnya Gulir penambahan gambar
Halaman berikutnya Judul penambahan gambar

Belajar bagaimana membuat efek penambahan zoom gambar saat di hover

Penambahan gambar layar penuh zoom

Tempatkan kursor di atas gambar, lalu lihat efek zoom.

Hello World

Coba sendiri

Bagaimana membuat efek penambahan zoom gambar

Kesadaran Pertama - Tambahkan HTML:

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Kesadaran Kedua - Tambahkan CSS:

/* Kontainer yang perlu ditempatkan lapisan. Sesuaikan lebar menurut kebutuhan */
.container {
  position: relative;
  width: 50%;
}
/* Membuat gambar dapat merespon */
.image {
  width: 100%;
  height: auto;
}
/* Efect penambahan yang penuh tinggi dan lebar - berada di atas kontainer dan gambar */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
}
/* Saat Anda menempatkan kursor di atas kontainer, teks yang ditambahkan akan “besar” terlihat */
.container:hover .overlay {
  transform: scale(1);
}
/* Tekst yang berada di dalam lapisan, posisi tengah secara vertikal dan horizontal */
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Coba sendiri