Эффект Lightbox на чистом CSS3

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

В статье рассматривается один из вариантов создания Lightbox-эффекта , результат которого можно просмотреть на демонстрационной странице.




Ранее Lightbox-эффект можно было создать только с помощью Java-скриптов. Однако Java-скрипты не отличаются большой производительностью.

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

Используя CSS переходы и анимацию, мы можем сделать вывод увеличенного изображения различными способами.

Псевдокласс :target позволяет сделать переход к элементу с определенным id. Этим мы и воспользуемся для создания эффекта Lightbox.

Для начала создадим блок миниатюр.

<div class="cat_block">
  <a href="#cat_1"><img class="cat" src="img/cat_1.jpg" alt="" width="240" height="138"></a>
  <a href="#cat_2"><img class="cat" src="img/cat_2.jpg" alt="" width="240" height="138"></a>
  <a href="#cat_3"><img class="cat" src="img/cat_3.jpg" alt="" width="240" height="138"></a>
  <a href="#cat_4"><img class="cat" src="img/cat_4.jpg" alt="" width="240" height="138"></a>
</div>

Блоку для вывода картинки с большим размером присвоим class="lb" и id="cat_1". Классы и идентификаторы могут иметь любое имя, но чтобы не мудрить использовал lb - Lightbox, и cat, т.к картинки с кошками. Этот блок первоначально спрятан и при клике на картинку выводиться на экран. Ссылка с class="lb-close" позволяет закрыть большую картинку после просмотра. Блок с class="lb_p" содержит текст (если это необходимо).
Т.к картинки выводится на экран с различными видами анимации class="lb" присвоены еще и числовые значения. Если же вывод картинок будет осуществляться одним способом – достаточно одного класса.

<div class="lb" id="cat_1">
   <img src="img/cat_1.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>Без анимации</p>
   </div>
</div> 
<div class="lb_2" id="cat_2">
   <img src="img/cat_2.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>animation: scaleDown</p>
   </div>
</div> 
<div class="lb_3" id="cat_3">
   <img src="img/cat_3.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>animation: fadeInScale</p>
   </div>
</div> 
<div class="lb_4" id="cat_4">
   <img src="img/cat_4.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>animation: rotate</p>
   </div>
</div>

Для <div class=”lb”> прописываем свойство position равное fixed, с нулевой высотой и шириной, а также затемнение основного контента.

.lb{
   width: 0px;
   height: 0px;
   position: fixed;
   overflow: hidden;
   left: 0px;
   top: 0px;
   padding: 0px;
   z-index:1000;
   text-align: center;
 /*затемнение основного контента*/
   opacity:0;
   background: rgba(47,47,56,0.4);       
   transition: opacity 1.2s linear; 
}

Оформление внешнего вида миниатюр и картинок большего размера каждый делает по своему усмотрению.

Для картинок прописываем:

.lb img {
   max-height: 100%;
   position: relative;
   opacity:1;
/* оформление на свой вкус*/
   border:3px solid #ccc;
   box-shadow: 0px 0px 8px #333;
}

Для текста под картинкой:

.lb > .lb_p{
   position: relative;
   opacity:0;
 /* оформление на свой вкус*/
   width: 550px;
   margin:10px auto 0px auto;
   transition: opacity 0.3s linear 1.3s;
}

Для ссылки “Закрыть”:

.lb a.lb-close {
   display: block;
   position:absolute;
   z-index: 1001;
 /* оформление на свой вкус*/ 
   top:131px;
   left:46%;
   width:100px;
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 400;
   overflow:hidden;
   opacity: 0;
   transition: opacity  0.5s 1.5s;
}

Ссылка-якорь в миниатюрах href="#cat-1" указывает на элемент c id="cat_1" , который представляет собой <div class="lb" id="cat_1">. Для вывода картинки на экран используем псевдоэлемент :target.

/*вывод блока "под картинку" */
.lb:target {
   width: auto;
   height: auto;
   bottom: 0px;
   right: 0px;
   padding: 175px 100px 120px 100px;
}

/* вывод картинки  без анимации */
.lb:target img,
.lb:target a.lb-close,
.lb:target >.lb_p {
   opacity: 1;
}  
 
  /* вывод картинки с анимацией*/

.lb_2:target img {
	animation: scaleDown 1.2s ease-in-out;
}
.lb_2:target a.lb-close,
.lb_2:target,
.lb_2:target >.lb_p {
	opacity: 1;
}
@keyframes scaleDown {
  0% { transform: scale(10,10); opacity: 0; }
  100% { transform: scale(1,1); opacity: 1; }
}

Изменяя время, виды анимации, применяя различные комбинации анимаций можно получить “красивую подачу” любой информации.




На демонстрационной странице показаны некоторые виды всплывающих картинок. Но на этом возможности Lightbox не ограничиваются. Дерзайте!!!
Источник