Мы решили создать свой вариант необычной галереи изображений без использования JavaScript, только с помощью кода CSS. Такая галерея изображений больше всего подходит группе из не более двух десятков изображений. Целью этой галереи является возможность отфильтровать элементы по типу так же, как в настоящей базе данных, только все элементы этой базы данных — изображения.

В примере ниже использованы фотографий, сделанные во время путешествий Trey Radcliff.

Изображения в галереи могут быть расположены почти любым желаемым способом. Фотографии находятся в элементе фигуры, но ненумерованный список или блок сработали бы так же хорошо. Каждому изображению задается класс, который определяет его как часть определенного набора. Так как класс используется только как обозначение группы, а не для задания стилей, атрибут данных HTML5 может быть использован вместо него.

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

<input type="radio" name="zoom" id="france">
<label for="france">France</label>
<input type="radio" name="zoom" id="japan">
<label for="japan">Japan</label>
<input type="radio" name="zoom" id="us">
<label for="us">United States</label>
<figure id="zoom-gallery">
        <img src="central-park-in-fall.jpg" alt="Central Park In Fall" class="us">
        <img src="kyoto-bamboo-walk.jpg" alt="Kyoto bamboo walk" class="japan">
        <img src="kyoto-forest-walk.jpg" alt="Kyoto forest walk" class="japan">
        <img src="paris-reflected.jpg" alt="Paris reflected" class="france">
        <img src="paris-skyline.jpg" alt="Paris skyline" class="france">
        <img src="yosemite-clouds.jpg"" alt="Yosemite clouds" class="us"> </figure>

Теперь перейдем к коду CSS. Начнем с базовых стилей:

figure#zoom-gallery {
        margin: 0;
        padding: 0;
}
figure#zoom-gallery img {
        width: 40%;
        max-width: 300px;
        margin: 3%;
        transition: .7s all ease-in-out;
}
label {
        color: #fff;
        font-family: Futura, Arial, sans-serif;
        padding: 1em;
}

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

Сначала добавим псевдокласс отмеченный, после этого — родственный селектор, чтобы приближать изображения в определенном наборе изображений. Ниже приведен пример записи этих стилей для фотографий из Японии:

input#japan:checked ~ figure img.japan {
        transform: scale(1.1);
}

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

input#japan:checked ~ figure img:not(.japan) {
        transform: scale(0.9);
        opacity: 0.6;
}

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

input[type="radio"] {
        display: none;
}
label:hover {
        cursor: pointer;
}

В результате получаем такую галерею изображений:

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание адаптивной галереи изображений HTML5 с подписями
• Альтернатива галерее изображений Lightbox на чистом CSS
• Анимированные галереи изображений с использованием CSS3: эффекты плавного появления и прокрутки