Хаки и Скрипты Next Generation CMS : Изображения, CSS : Простой способ сделать Lightbox на CSS3

irbees2008 Опубликовано - 19 - мая Изображения

Автор: --------------
Обсудить на :на форуме
Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: нужны навыки css hmlt

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

1.Для начала нам нужна миниатюра. Окружаем эту миниатюру ссылкой.

Код:

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

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

Код:

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

3.Вот сами и стили, позволяющие реализовать 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).
вот и все

Можешь почитать и вот эту статейку "Стильное,полупрозрачное горизонтальное CSS3 меню с всплывающими пунктами при наведении"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.