• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Как сделать Лайтбокс на чистом HTML + CSS (Создаем увеличение изображение на чистом стиле CSS)
Как сделать Лайтбокс на чистом HTML + CSS
Kosten
Воскресенье, 07 Ноября 2021 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Вероятно многие не сразу поверят, что можно на чистом CSS создать увеличение картинки или просто Лайтбокс при участие стилистики. Но вам скажу, что это реально, где нам потребуется 2 формата по размеру изображение, и правильно написанный код со стилями, и вот вам готовый инструмент по увеличение картинок при клике.



Основные требования:

1. При нажатии на миниатюру должен отображаться:
2. Должно загружаться изображение после показа;
3. Также скрываться лайкбокс после нажатия увеличенного изображения:

Установка:

HTML

Код
<!-- уменьшенное изображение, обернутое ссылкой -->
<a href="#img1">
  <img src="https://picsum.photos/seed/9/500/300">
</a>

<!-- контейнер лайтбокса, скрытый с помощью CSS -->
<a href="#" class="lightbox" id="img1">
  <span style="background-image: url('https://picsum.photos/seed/9/900/450')"></span>
</a>

CSS

Код
.lightbox {
  /* По умолчанию скрыто */
  display: none;

  /* Наложить весь экран */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Небольшой отступ вокруг изображения */
  padding: 1em;

  /* Полупрозрачный фон */
  background: rgba(0, 0, 0, 0.8);
}

/* Показать лайтбокс, когда он является целью */
.lightbox:target {
  display: block;
}

.lightbox span {
  /* Полная ширина и высота */
  display: block;
  width: 100%;
  height: 100%;

  /* Размер и положение фонового изображения */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

Возможно такое решение кому пригодится, где нужно одно изображение поставить на увеличение, где на чистой стилистике вы можете выполнить быстро и не сложно.

Это все, что нужно для создания лайтбокса с отслеживанием состояния на чистом CSS. Вот полный рабочий пример, представленный ниже. Обязательно наблюдайте, как изменяется URL-адрес при отображении и скрытии лайтбокса.

Демонстрация
Прикрепления: lightbox.zip (3.7 Kb) · 6103289.png (146.2 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Как сделать Лайтбокс на чистом HTML + CSS (Создаем увеличение изображение на чистом стиле CSS)
  • Страница 1 из 1
  • 1
Поиск: