Bagaimana untuk membuat: superimposition zoom gambar

Belajar bagaimana untuk membuat efect superimposition zoom saat hover

Superimposition zoom gambar penuh layar

Tahan kursor diatas gambar, untuk melihat efect zoom.

Avatar
Hello World

Cuba sendiri

Bagaimana untuk membuat efect superimposition zoom

Kesempatan 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>

Kesempatan Kedua - Tambahkan CSS:

/* Container yang memerlukan lapisan. Sesuaikan lebar sesuai kebutuhan */
.container {
  position: relative;
  width: 50%;
}
/* Membuat gambar responsif */
.image {
  width: 100%;
  height: auto;
}
/* Efect lapisan (penuh tinggi dan lebar) - berada di atas container 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 kursor diatas container, teks lapisan akan “besar” tampil */
.container:hover .overlay {
  transform: scale(1);
}
/* Teks dalam lapisan, penempatan tengah mendatar dan melintasi */
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Cuba sendiri

Halaman berkaitan

Tutori:CSS 图像

Tutori:如何创建图像叠加悬停效果