How To

Cara Membuat Overlay Di Web HTML + CSS

Di bawah ini kita akan mempelajari cara membuat efek overlay dengan CSS.

Overlay

Efek Overlay dapat digunakan dengan memberikan warna pada background dan menambahkan opacity ke dalamnya, seperti contoh berikut ini :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}
</style>
</head>
<body>

<div id="overlay" >

Cara Membuat Efek Overlay

Langkah 1) Tambahkan HTML:
Gunakan elemen apa pun dan letakkan di mana saja di dalam dokumen:
Contoh

<div id="overlay"></div>

Langkah 2) Tambahkan CSS:
Style pada elemen overlay:
Contoh

#overlay {
  position: fixed; /* Tetapkan posisi di atas konten halaman */  display: none; /* Disembunyikan secara default */  width: 100%; /* Lebar penuh (menutupi seluruh halaman) */  height: 100%; /* Tinggi penuh (menutupi seluruh halaman) */  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Warna background hitam dengan opacity */  z-index: 2; /* Tentukan urutan tumpukan jika ingin menggunakan urutan yang berbeda untuk elemen lain */  cursor: pointer; /* Tambahkan penunjuk saat mengarahkan kursor */}

Langkah 3) Tambahkan JavaScript:
Gunakan JavaScript untuk mengaktifkan dan menonaktifkan efek overlay:
Contoh

 function on() {
  document.getElementById("overlay").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}

Efek Overlay dengan Teks

Tambahkan apa pun yang diinginkan di dalam overlay dan letakkan di tempat yang diinginkan. Dalam contoh ini kita menambahkan teks di tengah halaman:
Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

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

<div id="overlay" >

Hanifah Nurbaeti

Share
Tags: CSSHow To