Адаптивный Lightbox Эффект на чистом CSS3

Почти два года прошло с момента написания статьи посвященной интереснейшему способу реализации lightbox-эффекта при просмотре полно-размерных изображений, без подключения к работе javascript, исключительно с помощью свойств CSS3.

Время не стоит на месте, стандарты, требования веб-разработки и дизайна меняются, пришло время немного подкорректировать некоторые свойства эффекта, добавив к нему новые функции.
По большому счёту особо ничего менять не пришлось, разве что подключил чуть более плавную трансформацию при проявлении картинок, да добавил правила @media для различных типов пользовательских устройств, адаптивный дизайн видите ли нынче в моде…
 

 
Итак, для начала, как всегда можете посмотреть на эффект в деле, поизменять размеры окна браузера, взглянуть на исходники, а затем более подробно разберём некоторые детали.
Сразу хочу отметить, что корректно и в полном объёме данный метод работает в браузерах поддерживающих псевдокласс :target(на нём собственно весь эффект и основан) это Firefox 1.0+, Chrome 1.0+, Opera 9.6+, Safari 3.0+ и Internet Explorer 9.0+, пользователи плотно подсевшие на IE 8, к сожалению ничего не увидят.

А может и это вам будет интересно:

Изначально, для скрытия и появления картинок полного размера использовал свойства display:none и display:block, но в таком случае картинки проявлялись мгновенно без какой-либо задержки. Чтобы создать визуальную иллюзию анимации при появлении изображений полного размера, заменил скрытие элемента на свойство прозрачности opacity: 0;.
В сущности данное свойство выполняет тоже самое, скрывает элемент на странице, делая его невидимым, но в связке с универсальным свойством transition:, можно регулировать эффект перехода между двумя состояниями элемента, это и есть своеобразный анимационный эффект.

Как и прежде, для начала нам потребуются миниатюры, создавать для этого отдельные картинки с меньшим размером совсем необязательно, так же отказался от использования указания фиксированной ширины изображения width="100px" в самом теге картинки <img>. Достаточно при формировании стилей в css указать значения в процентах для свойств max-width: и max-height:, определяющих размеры будущей миниатюры в зависимости от размеров блока в котором они будут размещены. Очень гибкое и удобное решение, избавляющее от необходимости каждый раз в тегах картинок прописывать размеры.
И так, создаем миниатюры, окружаем их ссылками с атрибутом href, точно соответствующим идентификатору id ссылок изображений в оригинальном размере, помещаем их в любой контейнер, в моём случае это специально созданный div с классом thumb, и получаем в итоге, вот такую несложную конструкцию в html:

<div class="thumb">
  <a href="#img1">
    <img src="img/img1.jpg">
  </a>
  <a href="#img2">
    <img src="img/img2.jpg">
  </a>
  <a href="#img3">
    <img src="img/img3.jpg">
  </a>
  <a href="#img4">
    <img src="img/img4.jpg">
  </a>
  <a href="#img5">
    <img src="img/img5.jpg">
  </a>
  <a href="#img6">
    <img src="img/img6.jpg">
  </a>
</div>

Затем на необходимо организовать ссылки на изображения реального размера со всеми нужными атрибутами для активации эффекта. Для этого достаточно ссылке картинки присвоить id связывающий её с адресом href ссылки миниатюры и прописать класс class=”lightbox” для связки с классом css, с помощью значений свойств которого, и будет активироваться наш замечательный эффект Lightbox при нажатии на выбранную миниатюру.

<a href="#close" class="lightbox" id="img1">
   <img src="img/img1.jpg">
</a>
<a href="#close" class="lightbox" id="img2">
   <img src="img/img2.jpg">
</a>
<a href="#close" class="lightbox" id="img3">
   <img src="img/img3.jpg">
</a>
<a href="#close" class="lightbox" id="img4">
   <img src="img/img4.jpg">
</a>
<a href="#close" class="lightbox" id="img5">
    <img src="img/img5.jpg">
</a>
<a href="#close" class="lightbox" id="img6">
     <img src="img/img6.jpg">
</a>

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

Эффект реализован благодаря псевдоклассу :target. То есть, если изначально для изображений с классом lightbox в стилях мы определили значение для свойства прозрачности opacity: 0;, тем самым визуально скрыв полно-размерные картинки на время, то определив правило с псевдоклассом :target для этих самых картинок, то по клику на миниатюре, происходит изменение значений высоты и ширины на максимальную, а изображение становится видимым благодаря изменению значения свойства opacity: 1;

Остаётся добавить некоторую плавность перехода от одного состояния изображений к другому с помощью свойства transition:, в примере выставил значение 500ms, в результате прозрачность изменяется не мгновенно, а с задержкой в пол секунды.
В итоге у нас получился довольно легкий и вполне понятный исполняемый код CSS, с помощью которого в будущем вам не составит особого труда изменить любые параметры самого эффекта, и параметры выводимых картинок. А небольшие мои пояснения, помогут вам быстрее разобраться что, куда и зачем

 a img {
    border: none; /* убираем рамку */
   }
.lightbox {
/** определяем базовый стиль lightbox */
  position: fixed;
  overflow: hidden;
  z-index: 9999;
  width: 0;
  height: 0;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
}
.lightbox img {
/** базовый стиль изображений lightbox*/
  width: 95%;
  max-width: 800px;
  height: auto;
  margin: 5% auto;
/** полная прозрачность изначально */
  opacity: 0;
  border: 1px solid #4D4D4D;
/** тени у картинок - это по желанию */
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
/* трансформация прозрачности при открытии  */
  -webkit-transition: opacity 500ms ease-in;
  -moz-transition: opacity 500ms ease-in;
  transition: opacity 500ms ease-in;  
}
.lightbox:target {
/** активируем lightbox при нажатии */
  width: auto;
  height: auto;
  bottom: 0;
  right: 0;
/** удаляем контур по умолчанию */
  outline: none;
}
.lightbox:target img {
/** делаем элемент непрозрачным  */
  opacity: 1;
}
/** стиль миниатюр для демо-страницы */
.thumb img{
  width: 45%;
  margin:2%;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
}

Вот и всё! Интереснейший эффект «Lightbox» готов к работе. Всё хорошо, только огорчает тот факт, что в полной мере, данный метод на чистом CSS3, использовать пока всё же преждевременно, учитывая, что всё еще популярный среди пользователей браузер IE8, лишен поддержки некоторых свойств CSS3.
Мне например, каждый раз так и хочется, забить на сей прискорбный факт и развернуться по полной, использовать без постоянной оглядки на этот недобраузер, всю мощь CSS3, но реалии диктуют свои правила и пока приходится искать компромиссные решения.

Еще раз смотрим живой пример, забираем архив с исходниками с моего Яндекс.Диска, кому оно надо конечно, и творим, творим, творим…

С Уважением, Андрей

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях: