Cara Membuat Image Overlay Icon

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

by Hanifah Nurbaeti January 27, 2021

Image Overlay Icon dapat digunakan jika kita ingin mengganti gambar menjadi ikon ketika kursor digerakkan.

Image Overlay Icon dibuat menggunakan HTML dan CSS.

Image Overlay Icon

Arahkan kursor ke gambar untuk melihat efek overlay.

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

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

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: blue;
}

.container:hover .overlay {
  opacity: 1;
}

.icon {
  color: white;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.fa-user:hover {
  color: #eee;
}
</style>
</head>
<body>

<h2>Fade in Overlay Icon</h2>
<p> Arahkan kursor ke atas gambar untuk melihat efeknya. </p>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Avatar" class="image">
  <div class="overlay">
  <a href="#" class="icon" title="User Profile">
    <i class="fa fa-user"></i>
  </a>
  </div>
</div>

</body>
</html>

Cara Membuat Image Overlay Icon

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">
  <a href="#" class="icon" title="User Profile">
    <i class="fa fa-user"></i>
  </a>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Container diperlukan untuk memposisikan overlay. Sesuaikan lebarnya sesuai dengan kebutuhan*/
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

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

/* Efek overlay (tinggi dan lebar penuh) - diletakkan di atas containernya dan di atas gambar */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: blue;
}

/* Saat akan mengarahkan mouse ke container, fade di ikon overlay*/
.container:hover .overlay {
  opacity: 1;
}

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

/* Saat kita menggerakkan mouse ke atas ikon, ubah warna */
.fa-user:hover {
  color: #eee;
}