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

Разметка для обоих примеров может быть следующей:

<div id="gallery">
        <img src="wooly-sunbonnet.jpg" alt="Wooly Sunbonnet">
        <img src="nettleleaf-sage.jpg" alt="Nettleleaf Sage">
</div>

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

Галерея с эффектом плавного появления

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

div#gallery {
        position: relative;
}
div#gallery img {
        width: 400px; height: 400px;
        position: absolute;
        left: 0;
        transition: all 2s ease-in-out;
}
div#gallery img:hover {
        opacity: 0;
}

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

Галерея с эффектом прокрутки

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

div#gallery, div#gallery img {
        width: 400px;
        height: 400px;
        overflow: hidden;
        float: left;
}
div#gallery img {
        transition: all 2s linear;
}
div#gallery img:hover,
        div#gallery img:hover + img {
                transform: translate(0, -400px);
}

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

Обратите внимание, оба показанных здесь способа работают только на парах изображений: они очень удобны для сравнений «до и после» или как анимированные варианты смены изображений.

Для переходов между серией более чем из двух изображений требуется более сложный код для создания галереи изображений.

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

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

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

• Галерея изображений с помощью свойства CSS object-fit: уменьшенное и полное изображения в одном файле
• Создание галереи изображений с увеличением с использованием только CSS3
• Создание раздвигающейся галереи изображений с использованием только CSS3