При создании адаптивных галерей изображений на CSS3 встает вопрос, как добавить подпись к каждому изображению. Решить эту задачу довольно просто, особенно используя понятную разметку HTML5. Наш пример создан на основании кода из вышеупомянутого урока, так что для подробного объяснения создания анимации обратитесь к нему. Здесь же мы сосредоточимся на задании стилей и использовании новых элементов.

Код HTML

В код из вышеуказанного урока внесено принципиальное изменение: каждое изображение теперь располагается в элементе фигуры:

<div id="captioned-gallery">
        <figure class="slider">
                <figure>
                        <img src="hobbiton-lake.jpg" alt>
                        <figcaption>Hobbiton, New Zealand</figcaption>
                </figure>
                <figure>
                        <img src="wanaka-drowned-tree.jpg" alt>
                        <figcaption>Wanaka, New Zealand</figcaption>
                </figure>
                <figure>
                        <img src="utah-peak.jpg" alt>
                        <figcaption>Utah, United States</figcaption>
                </figure>
                <figure>
                        <img src="bryce-canyon-utah.jpg" alt>
                        <figcaption>Bryce Canyon, Utah, United States</figcaption>
                </figure>
                <figure>
                        <img src="hobbiton-lake.jpg" alt>
                        <figcaption>Hobbiton, New Zealand</figcaption>
                </figure>
        </figure>
</div>

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

Код CSS

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

div#captioned-gallery {
        width: 100%;
        overflow: hidden;
}
figure { margin: 0; }
figure.slider {
        position: relative;
        width: 500%;
        font-size: 0;
        animation: 40s slidy infinite;
}
figure.slider figure {
        width: 20%;
        height: auto;
        display: inline-block;
        position: inherit;
}

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

figure.slider img {
        width: 100%;
        height: auto;
}
figure.slider figure figcaption {
        position: absolute;
        bottom: 0;
        background: rgba(0,0,0,0.3);
        color: #fff;
        width: 100%;
        font-size: 2rem;
        padding: .6rem;
}

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

Создание адаптивных подписей

Хотя изображения адапивны, текст подписей пока что нет. Есть три пути, как можно это исправить:

1)      Задать размер текста в единицах измерения vw, а не rem или em.

2)      Изменять размер текста в подходящих точках перехода с помощью запросов @media.

3)      Использовать запрос @media, чтобы полностью спрятать подписи, когда окно браузера слишком маленькое.

В этом случае выбран второй вариант:

@media screen and (max-width: 500px) { 
        figure.slider figure figcaption {
                font-size: 1.2rem;
        }
}

В результате получаем следующее:

Варианты

Также можно сделать подписи невидимыми по умолчанию, хотя бы до того момента, как пользователь наведет указатель мыши на изображение:

figure.slider figure figcaption {
        position: absolute;
        bottom: -3.5rem;
        background: rgba(0,0,0,0.3);
        color: #fff;
        width: 100%;
        font-size: 2rem;
        padding: .6rem;
        transition: .5s bottom;
}
figure.slider figure:hover figcaption {
        bottom: 0;
}

Это перенесет подпись из-под каждого изображения. Однако когда галерея перейдет к следующему изображению, элемент подписи фигуры для следующего изображения еще не будет активен. Чтобы решить эту проблему, можно создать подобное объявления с использованием соседнего селектора:

figure.slider figure:hover + figure figcaption {
        bottom: 0;
}

Заключение

Хотя этот вариант и работает, в нем много повторений и избыточности кода. При помощи JavaScript, например скрипта CSSslidy, можно устранить этот недостаток.

Использованы фотографии Trey Ratcliff , лицензированные по лицензии Creative Commons.

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

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

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

• Использование разных способов применения стилей CSS
• Использование наборов изображений в HTML5
• Переключение на изображения высокого разрешения для полноэкраного режима