Эта статья была вдохновлена проектом одного из моих бывших студентов. Созданная им галерея работала на jquery, но я расскажу Вам как этот же результат может быть достигнут исключительно с помощью CSS.
Реализованный ниже эффект лучше всего подходит к группам из двух элементов и больше. Наша цель состоит в том, чтобы отфильтровать изображения по типу, примерно также как вы фильтруете элементы в базе данных, только мы это сделаем визуально.
В галерее изображения могут быть организованы любым способом, который Вам нравится: я поместил фотографии в тег figure, но неупорядоченный список или если Вы их обернете тегом div
не приведут к фатальным последствиям. Каждое изображение получает class
, который идентифицирует его как член определенного набора. Атрибут class
используется только в качестве идентификатора, а не для стилевых преобразований. Использование введенного в HTML5 атрибута data
может также эффективно.
Интересная часть кода наблюдается над кодом с изображениями. HTML5 позволяет размещать элементы формы в любом месте, поэтому мы можем добавить ряд переключателей с соответствующими им тегами label непосредственно над изображениями. Атрибут for
каждого тега <label>
такой же как и id
переключателя. Все переключатели имеют одно и тоже значениа атрибута name
поэтому, активация одного приводит к отключению остальных.
<input type="radio" name="group" id="france"><label for="france">Франция</label>
<input type="radio" name="group" id="japan"><label for="japan">Япония</label>
<input type="radio" name="group" id="us"><label for="us">США</label>
<figure id="group-gallery">
<img src="central-park-in-fall.jpg" alt class="us">
<img src="kyoto-bamboo-walk.jpg" alt class="japan">
<img src="kyoto-forest-walk.jpg" alt class="japan">
<img src="paris-reflected.jpg" alt class="france">
<img src="paris-skyline.jpg" alt class="france">
<img src="disneyland.jpg" alt class="us">
</figure>
Теперь для CSS. Начнем с базовой настройки:
.zoomer .zoom-gallery img {
width: 40%;
max-width: 300px;
margin: 3%;
transition: .7s all ease-in-out;
}
label {
color: #fff;
font-family: Arial, sans-serif;
padding: 1em;
}
Начиная с вариации :checked
, мы добавили соседний селектор для увеличения картинок в конкретном наборе. Я покажу это на примере фотографий, относящихся к Японии:
#japan:checked ~ figure img.japan { transform: scale(1.1); }
В то же время, мы хотим, чтобы уменьшились изображения в галерее, которые не принадлежат к выбранной группе. Для этого мы используем селектор :not. Приведу пример для фотографий, НЕ относящихся к Японии:
#japan:checked ~ figure img:not(.japan) { transform: scale(0.9); opacity: 0.6; }
Спрячем наши радио-кнопки, установив для них свойство display: none
, используя управлением переключателями с помощью тегов label
. Если вы сделаете это, имеет смысл добавить атрибут :hover к тегам label
, чтобы было ясно, что они выступают в качестве ссылок:
input[type="radio"] { display: none; }
label:hover { cursor: pointer; }
Из множества возможных улучшений, которые можно еще добавить - я реализовал анимацию свойства box-shadow для изображений. На этом наш урок закончен. Как видите, мы обошлись без Javascript. Единственным недостатком нашей галереи по сравнению с версией на JavaScript является то, что она не масштабируется, но это не проблема, когда число элементов невелико и неизменно.