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

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

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

Шаг 1. HTML

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

С разметкой мы разобрались, если вы хоть не много в этом разбираетесь, то сложностей не должно вызвать.

Галерея с увеличением для сайта с помощью CSS3 RUDEBOX

Шаг 2. CSS

Для начала нам необходимо определить некоторые базовые стили:

Мы установили <span> элементы display: none , для того, чтобы сделать кнопку закрытия, которая появляется, когда пользователь нажимает на изображение.

Далее необходимо добавить позиционирование для изображений, если вы хотите добавить новые, то вам необходимо внести дополнения в данный раздел:

При открытии изображения происходит его позиционирование на странице:

Мы не используем различных плагинов, что весьма упростит скорость загрузки, и обеспечит большую практичность.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.