Создаем эффект lightbox при помощи CSS3

Используя CSS переходы и анимацию, мы можем сделать появление большого изображения различными симпатичными способами. Открывать картинки по ссылкам мы будем с помощью псевдо-класса :target, так что наши примеры будут работать только в браузерах, которые поддерживают данный псевдокласс.

Итак, поехали!

HTML-разметка

В начале создадим набор миниатюр, каждая из которых имеет название, которое будет отображаться при наведении курсора. При нажатии на миниатюру, мы будем показывать большую версию изображения в блоке с классом lb-overlay, который изначально будет спрятан. Итак, мы будем использовать неупорядоченный список, где каждый элемент списка будет содержать миниатюру и блок с соответствующим большим изображением. Список сверстаем в модели grid, используя готовые Bootstrap-классы:

<ul class="list-unstyled d-grid gap-2 mb-0 lb-album">
  <li>
    <a href="#image-01">
      <img src="i/image-01-thumb.jpg" alt="Image 01" class="img-fluid">
      <span>Image 01</span>
    </a>
    <div class="lb-overlay" id="image-01">
      <img src="i/image-01.jpg" alt="Image 01" />
      <div>
        <h3>Image 01 Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
          do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <a href="#image-06" class="lb-prev">&larr;</a>
        <a href="#page" class="lb-close">&times;</a>
        <a href="#image-02" class="lb-next">&rarr;</a>
      </div>
    </div>
  </li>
  <li>
    <a href="#image-02">
      <img src="i/image-02-thumb.jpg" alt="Image 02" class="img-fluid">
      <span>Image 02</span>
    </a>
    <div class="lb-overlay" id="image-02">
      <img src="i/image-02.jpg" alt="Image 02" />
      <div>
        <h3>Image 02 Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
          do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <a href="#image-01" class="lb-prev">&larr;</a>
        <a href="#page" class="lb-close">&times;</a>
        <a href="#image-03" class="lb-next">&rarr;</a>
      </div>
    </div>
  </li>
  <!-- ... -->
</ul>

Якорь в миниатюрах, например, href="#image-01" будет указывать на элемент с id image-01, который представляет собой div классом lb-overlay. Для того, чтобы переходить по изображениям, мы добавим две ссылки, которые указывают на предыдущее и следующее (большое) изображение.

Для того, чтобы "закрыть" lightbox, мы будем просто кликать на ссылку с классом lb-close, которая указывает на элемент с ID page, который является, в нашем примере, тегом body. Обратите внимание на то, как используется навигация в первом и последнем элементе.

Теперь давайте обратимся к стилям.

CSS

Я не стал усложнять стили ненужным декором (исключая анимацию для примеров с 3 по 6). Никаких браузерозависимых префиксов или другой дичи нам не понадобится. Ниже представлены стили нашего основного слоя, неупорядоченного списка и миниатюр:

.lb-album {
	grid-template-columns: repeat(3, 1fr);
}

.lb-album > li > a {
	display: block;
	position: relative;
}

.lb-album > li > a::after {
	content: '';
	background: rgba(0,0,0,0);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: all .4s ease;
}

.lb-album > li > a > span {
	color: #fff;
	font-size: 1.5rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	visibility: hidden;
	opacity: 0;
	transition: all .4s ease;
	z-index: 2;
}

Название каждой миниатюры будут невидимым и мы будем добавлять переход для непрозрачности, которая станет равной 1, когда мы наведем курсор мыши на якорь миниатюры. В качестве фона для наглядности используем заливку, реализованную через rgba-значение, в котором можно реализовать степень прозрачности:

.lb-album > li > a:hover::after {
	background: rgba(0,0,0,.75);
}

.lb-album > li > a:hover > span {
	visibility: visible;
	opacity: 1;
}

Стили для оверлея:

.lb-overlay {
	width: 0;
	height: 0;
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	padding: 0;
	z-index: 10;
	text-align: center;
	background: rgba(0,0,0,.9);
}

При клике по миниатюре он распахнется на весь экран:

.lb-overlay:target {
	width: 100%;
	height: 100%;
	padding: 80px 100px 120px 100px;
}

Теперь давайте посмотрим на дочерние элементы. Зададим минимально необходимые стили для основного названия, описания и навигационных ссылок:

.lb-overlay > img {
	margin: 0 0 2rem;
	max-height: 80%;
	transition: all 0.5s linear;
}

.lb-overlay > div {
	color: #fff;
}

.lb-overlay > div > a {
	color: #fff;
	font-size: 2rem;
	text-decoration: none;
}

Изображение будет иметь максимальную высоту 80% (просто чтобы осталось место для описания и навигации). Мы также добавим переход для создания полупрозрачности. Как только мы "откроем" большое изображение, прозрачность будет анимирована. Позже мы увидим, как мы можем использовать анимацию для изображения.

Создаем эффект lightbox при помощи CSS3

Когда мы нажимаем на якорь миниатюры, он будет указывать на соответствующее ему полноразмерное изображение, которое находится в блоке с классом lb-overlay. Таким образом, с целью нахождения этого элемента мы можем использовать псевдокласс :target. После клика добавим padding для нашего оверлея и "растянем" его, установив ширину и высоту равными 100%. Помните, что мы уже установили top и left раньше.

Для картинок 1 и 2 мы используем простой вариант анимации, при котором прозрачность изображения плавно (за счет указанного выше свойства transition) увеличится от 0 до 1:

div#image-01 > img,
div#image-02 > img {
	opacity: 0;
}

div#image-01:target > img,
div#image-02:target > img {
	opacity: 1;
}

Для картинок 3 и 4 мы создадим кастомную анимацию под названием scaleUp:

div#image-03:target > img,
div#image-04:target > img {
	animation: scaleUp 1s ease-in-out;
}

@keyframes scaleUp {
	0% { transform: scale(0.6); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

С ее помощью картинка вместе с изменением прозрачности будет увеличена в размере от 0,6 до 1.

Для картинок 5 и 6 применим "зеркальный" вариант анимации scaleDown, который уюе уменьшит картинку с 10 до 1:

div#image-05:target > img,
div#image-06:target > img {
	animation: scaleDown 1s ease-in-out;
}

@keyframes scaleDown {
	0% { transform: scale(10); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

Если все же возникнет необходимость кастомизировать какие-либо свойства, это можно сделать при помощи браузерных префиксов. Например, при желании изменить время анимации только для браузера Firefox, измените соответствующим образом -moz-свойства.