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" onclick="off()"></div> <div style="padding:20px"> <h2>Overlay</h2> <p>Tambahkan efek overlay ke konten halaman (lebar dan tinggi 100% dengan warna latar hitam dengan opasitas 50%).</p> <p>Ketuk di mana saja untuk mematikan efek overlay</p> <button onclick="on()">Aktifkan efek overlay</button> </div> <script> function on() { document.getElementById("overlay").style.display = "block"; } function off() { document.getElementById("overlay").style.display = "none"; } </script> </body> </html>
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" onclick="off()">
<div id="text"> Ketuk di mana saja untuk mematikan efek overlay
</div>
</div>
<div style="padding:20px">
<h2>Overlay with Text</h2>
<button onclick="on()">Turn on overlay effect</button>
</div>
<script>
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
</script>
</body>
</html>
