Hoe - Overlay
Leer hoe u een overlay-effect maakt met CSS.
overlay
Leer hoe u een overlay-effect maakt:
overlay
Een overlay-effect creëren
Stap 1) HTML toevoegen:
Gebruik elk element en plaats het overal in het document:
Voorbeeld
<div id="overlay"></div>
Stap 2) CSS toevoegen:
Stijl het overlay-element:
Voorbeeld
#overlay {
position: fixed; /* Sit on top of the
page content */
display: none; /* Hidden by default */
width: 100%; /*
Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2;
/* Specify a stack order in case you're using a different order for other
elements */
cursor: pointer; /* Add a pointer on hover */
}
Stap 3) JavaScript toevoegen:
Gebruik JavaScript om het overlay-effect in en uit te schakelen:
Voorbeeld
function on() {
document.getElementById("overlay").style.display
= "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
Overlay-effect met tekst
Voeg alles toe wat je maar wilt in de overlay en plaats het waar je maar wilt. In dit voorbeeld voegen we tekst toe in het midden van de pagina:
Voorbeeld
<style>
#text{
position: absolute;
top: 50%;
left: 50%;
font-size:
50px;
color: white;
transform:
translate(-50%,-50%);
-ms-transform:
translate(-50%,-50%);
}
</style>
<div id="overlay">
<div id="text">Overlay Text</div>
</div>