Создание галереи изображений css

Step 2) Add CSS:

This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%):

Example

div.gallery <
border: 1px solid #ccc;
>

div.gallery:hover border: 1px solid #777;
>

div.gallery img width: 100%;
height: auto;
>

div.desc padding: 15px;
text-align: center;
>

.responsive padding: 0 6px;
float: left;
width: 24.99999%;
>

@media only screen and (max-width: 700px) .responsive width: 49.99999%;
margin: 6px 0;
>
>

@media only screen and (max-width: 500px) .responsive width: 100%;
>
>

.clearfix:after content: «»;
display: table;
clear: both;
>

Tip: Go to our HTML Images Tutorial to learn more about images.

Tip: Go to our CSS Style Images Tutorial to learn more about how to style images.

Источник

Создание галереи изображений на CSS сетке (с эффектом размытия и медиа запросами)

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

Вот что мы будем создавать:

Немного фона

Недавно, Рэйчел МакКоллин написала урок, объясняющий то, как в тему WordPress добавить галерею на основе ссылок на изображения.

Эти ссылки действуют в качестве навигации для дочерних страниц, не зависимо от того на какой странице пользователь (или какую страницу вы выберите), а итоговый плагин выводит что-то типа этого:

С помощью генератора разметки в плагине Рэйчел, мы сделаем следующее:

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

1. Изменим разметку (слегка)

Давайте взглянем на разметку, сгенерированную кодом Рэйчел. После очистки, он выглядит вот так круто:

 class="location-title" href="#">San Francisco 

 src="image.jpg" alt="san francisco"> 

У нас тут родительский элемент , который содержит и несколько элементов . Если мы используем CSS сетку, сначала мы определяем контейнер сетки. Мы могли бы использовать для этого родительский , но тогда каждый прямой дочерний элемент, даже станут элементами сетки, поэтому нам нужно кое-что изменить.

Мы обернём все элементы в другой (вы можете использовать любой элемент, который считаете наиболее подходящим), которому мы так изобретательно присвоим класс grid-container . Используйте этот исходный pen за основу.

2. Отзывчивая CSS-сетка в три строки

Всего несколько правил могут превратить наши миниатюры в сетку:

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 

Тут display: grid; – делает дочерние элементы элементами сетки и располагает их как положено, grid-gap: 1em; – задаёт интервалы.

Из-за значения, которое мы задали свойству grid-template-columns , которое определяет наши столбцы, возникают небольшие сложности. Наверное, вы ожидали увидеть что-то вроде repeat(3, 200px) , что дало бы нам 3 столбца по 200px. В нашем случае, для repeat() , мы использовали ключевое слово auto-fill , а затем несколько значений. Что даёт нам столько столбцов шириной минимум 300px и максимум 1fr, сколько смогут вместиться в контейнер сетки.

Изменяйте размер окна браузера и смотрите, как оно меняется!

Осталось добавить лишь одну деталь:

Это обеспечит правильное заполнение контейнера изображениями (особенно это необходимо для демо от Рэйчел, так как нам нужно переопределить свойства width и height для WordPress вывода).

3. Эффект при наведении

В качестве наложения на миниатюры, мы будем использовать названия (title), которые будут появляться при наведении. А ещё сделаем изображение под курсором красноватыми и немного размытыми, для удобства читаемости текста наложения.

Накладываем названия

Для наложения названия, нам нужно правильно его расположить, поэтому начнём с article и зададим ему position: relative ;, а для title – position: absolute; . Также придадим фону красноватый эффект и сделаем так, чтобы он заполнял всё доступное пространство.

Осталось доработать ещё одну-две вещи, включая лишнее пространство снизу (название немного больше, чем миниатюра). Это можно решить, удалив все line-height в контейнере изображений.

Оформляем названия

Некоторые типографические приёмы могут улучшить вид наших названий, а три строки с магией flexbox, выровняют их по центру.

/* position the text centrally*/ 

Скрываем названия

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

/* hide the title by default */ 

Ещё мы задали правило transition , чтобы непрозрачность происходила постепенно (за 0,5 секунды). Давайте сделаем это:

.location-listing:hover .location-title  

Прекрасно! Теперь названия снова появляются при наведении курсора мыши:

Размытые линии

Мы уже создали отлично-выглядящий эффект при наведении, но может добавим ещё чего-нибудь, как думаете? Давайте добавим фильтр размытия к изображениям. Начнём с настройки фильтра размытия при обычном состоянии, чтобы было от чего отталкиваться при переходе. Затем, для состояния «при наведении», добавим размытие на 2px (можете поставить любую другую цифру, но я думаю, с 2px выглядит хорошо):

transition: filter 0.3s ease-in; 

.location-listing:hover .location-image img  

1. Названия исчезли потому, что теперь браузер показывает размытое изображение поверх него.
2. Эффект размытия выглядит хорошо, но у нас появились размытые края (мы можем сделать это получше).

Исправить скрытые заголовки нам поможет z-index: 1; , если мы добавим его в .location-title .

Исправление размытых краёв немного сложнее. Начнём с масштабирования изображения, сделав его немного больше, затем для контейнера изображений (. location-listing ) зададим overflow: hidden; , таким образом, при размытии большего изображения, его края удачно обрежутся. Вот окончательные свойства для двух проблемных моментов:

transition: filter 0.3s ease-in; 

Правило transform: scale(1.1); масштабирует наши изображения во всех направлениях на 1,1 (1,0 не изменит их вовсе). Этот результат намного аккуратнее:

4. Проблема с сенсорными экранами

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

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

Например, возьмём этот медиа-запрос (он делает именно то, что от него ожидается):

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

Источник

Как создать галерею изображений на сайте

Узнайте, как легко создать галерею изображений на вашем сайте с помощью двух популярных методов: HTML/CSS и JavaScript-библиотек.

Создание галереи изображений на сайте может быть выполнено с использованием различных инструментов и подходов. В этой статье мы рассмотрим два популярных метода: с использованием HTML/CSS и с применением библиотеки JavaScript. Давайте начнем! 🚀

Метод 1: HTML и CSS

Шаг 1: Разметка

Сначала создадим разметку для галереи с помощью тегов HTML. В данном примере мы будем использовать теги div и img :

Шаг 2: Стилизация

Теперь добавим немного стилей с помощью CSS, чтобы сделать галерею более красивой и функциональной:

В данном примере мы используем свойства flex , flex-wrap и gap для создания адаптивной сетки изображений. Свойство cursor указывает, что изображения являются интерактивными элементами.

Метод 2: JavaScript-библиотека

Если вы хотите добавить дополнительные функции, такие как просмотр изображений в модальном окне, вы можете использовать готовые JavaScript-библиотеки. Одна из таких библиотек — Lightbox.

Шаг 1: Подключение библиотеки

Подключите файлы стилей и скриптов Lightbox к вашему проекту:

Шаг 2: Разметка

Создайте разметку галереи аналогично первому методу, но добавьте атрибут data-lightbox и ссылку на большое изображение для каждого элемента:

Шаг 3: Стилизация

Добавьте стили CSS из первого метода или свои собственные стили для кастомизации галереи.

Теперь у вас есть галерея изображений с возможностью просмотра в модальном окне! 🎉

В заключение, создание галереи изображений на сайте может быть выполнено разными способами, в зависимости от ваших потребностей и предпочтений. Экспериментируйте с разными инструментами и подходами, чтобы найти тот, который подходит вам больше всего. Удачи вам в обучении веб-разработке! 🤖

Источник