Вероятно многие не сразу поверят, что можно на чистом 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-адрес при отображении и скрытии лайтбокса.
Демонстрация
