Самый простой способ сделать Lightbox эффект

      CSS

Здравствуйте, уважаемые читатели XoZbloga! У многих, хотя наверное у всех на сайтах есть плагин для создания lightbox эффекта, т.е. когда картинка открывается в полный размер, а остальной контент затемняется. Используя CSS3 можно максимально упростить создание такого эффекта. В данной статье, эффект реализован благодаря псевдоклассу :target.

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

<a href="#image1"><img src="kartinka.jpg" width="100px"></a>

Теперь добавляем еще строку кода. Здесь то же самое изображение, но уже в оригинальном размере, также окруженное ссылкой у которой значение атрибута id равно значению атрибута href у ссылки выше. И есть класс pressbox.

<a href="#" id="image1" class="pressbox"><img src="kartinka.jpg"></a>

Вот сами правила CSS3, позволяющие реализовать lightbox эффект.

.pressbox {
   width: 0;
   height: 0;
   position: fixed;
   overflow: hidden;
   left: 0;
   top: 0;
    /* Поверх всех остальных элементов */
    z-index: 9999;
   text-align: center;
    /* Полупрозрачный серый фон */
   background: rgba(0,0,0,0.7);
   }
 
   .pressbox img  {
        /* изначально полностью прозрачная картинка */
      opacity: 0;
      padding: 10px;
      background: #ffffff;
      margin-top: 100px;
        /* тени */
      -webkit-box-shadow: 0px 0px 15px #444;
      -moz-box-shadow: 0px 0px 15px #444;
      box-shadow: 0px 0px 15px #444;
        /* свойство прозрачности изменяется не сразу а за четверть секунды */   
      -moz-transition: opacity .25s ease-in-out;
      -webkit-transition: opacity .25s ease-in-out;
      transition: opacity .25s ease-in-out;    
      }
 
.pressbox:target {
   width: auto;
   height: auto;
   bottom: 0;
   right: 0;
   }
 
   .pressbox:target img {
      opacity: 1;
      }

Изначально элемент с классом pressbox не виден так как ширина и высота равна 0, а изображение полностью прозрачное. Но как только в адресной строке браузера появляется #image1, то есть щелчок по миниатюре, происходит переход к целевому элементу (к элементу с id равным image1). А псевдокласс :target применяется к целевому элементу. Поэтому для ссылки ширину и высоту изменяем на максимальную, а изображение лишаем прозрачности (opacity: 1).

Ах да, не забывайте что работает только в:

  • Firefox 1.0 +
  • Safari 3.1 +
  • Opera 9.5 +
  • Chrome 2 +

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!