Оверлей

  alexei 13/12/2022 - 10:05

Здесь вы узнаете, как сделать эффект "оверлея" или наложения при помощи CSS и JavaScript.


Оверлей

Оверлей


Нажмите в любом месте, чтобы закрыть оверлей

Как сделать эффект оверлея

Шаг 1) Добавляем HTML:

Используем любой эллемент и помещаем его в любом месте в документе:


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

Шаг 2) Добавляем CSS:

Определяем стили оверлейного элемента:


#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; /* Добавляем курсор при наведении */
}

Шаг 3) Добавляем JavaScript:

Используем JavaScript, чтобы включать и выключать эффект оверлея:


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

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

Эффект оверлея с текстом

Внутри оверлея можно поместить все, что угодно. В следующем примере мы добавляем текст в середину страницы:


<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">Текст оверлея</div>
</div>