Cara Mmbuat Image Overlay Zoom

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

by Hanifah Nurbaeti January 24, 2021

Pelajari cara membuat efek zoom overlay gambar saat melakukan hover.

Image Hover Fullscreen Zoom

Arahkan kursor ke gambar untuk melihat efek zoom.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: .3s ease;
  transition: .3s ease;
}

.container:hover .overlay {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
</style>
</head>
<body>

<h2> Image Hover Fullscreen Zoom </h2>
<p> Arahkan kursor ke atas gambar untuk melihat efek zoom. </p>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

Cara Membuat Overlay Zoom Effect

Langkah 1) Tambahkan HTML:
Contoh

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

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

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

/* Efek overlay (tinggi dan lebar penuh) - diletakkan di atas container dan di atas 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 akan mengarahkan mouse ke container, teks overlay akan "memperbesar" tampilan */
.container:hover .overlay {
  transform: scale(1);
}

/* Beberapa teks di dalam overlay, yang diposisikan di tengah secara vertikal dan horizontal */
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}