57 CSS Galleries

HTML and CSS responsive image/photo gallery: flexbox, grid, lightbox, with thumbnails, etc. Update of April 2020 collection. 8 new examples.

Related Articles

Author

Links

Made with

About a code

CSS-Only Photo Info Popup

Working on a popup to display photo information! This uses a checkbox with multiple labels to control the popup.

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Links

Made with

About a code

Sticky Photostack

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Lookbook Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Image Reveal with filter && clip-path

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Flex Image Gallery with Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Grid Gallery — The Elusive Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Grid Image Gallery With Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Image Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Diamond Shape Grid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Photo Gallery

A masonry style photo gallery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hive Photo Gallery Grid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gritty Grid Gallery

A fast idea to use CSS Grid to display an image gallery. Hover/click to expand.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Winter Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Rhomb Gallery On Grids

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Fashion Isometric Gallery

Experiment for testing isometric ecommerce layout concept.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Drop Spread Blur

Only CSS gallery with drop spread blur effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gallery

Gallery with hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Hexagon Gallery

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About a code

Accordion Gallery Zoom Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Masonry Gallery

Responsive CSS Grid masonry gallery.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Pure CSS Responsive Gallery

Tired of writing JavaScript? Have you written your fair share of jQuery onclick events? Despair not! For you can make a responsive gallery in just HTML and CSS. All you need are some labels and some exotic CSS. Have fun!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Gallery

Masonry gallery with scroll effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Responsive Photo Gallery Grid with Lightbox — No Script

Responsive photo gallery updated with lightbox effects. Utilize CSS Grid & Flexbox and no script. Using target property.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Simplicity

Simple gallery in HTML, CSS and JS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Product Gallery

A minimal single product page built with CSS Flexbox and vanilla JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: 12columns.scss, onicons.css

Author

Links

Made with

About the code

Horizontal Slider to Gallery Grid

Full responsive grid with awesome mobile UX using one media query and two lines of code.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Seasons Gallery

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Pop-up/Overlay Gallery

This is a popup overlay design for your portfolio! Display your projects/work in detail with a click of a button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Image Gallery

Parallax image gallery using figure & figcaption .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS Gallery

Image gallery made with flexbox and CSS grid .

Author

Links

Made with

About the code

Tumblr Photogrid/Photoset

Tumblr photogrid/photoset with flex-box in place of JavaScript.

Author

Links

Made with

About the code

Responsive Pure CSS Image Gallery with CSS Grid

Here’s one of an image gallery where you select the img you want to be showcased in the center. The layout is made possible with CSS grid . When switching to a smaller viewport you’ll get a different experience that is made possible by altering the grid-template-columns and grid-template-rows .

Author

Links

Made with

About the code

Magnific Gallery

Nice responsive gallery with: CSS columns, roll over, hover caption, magnific popup script, zoom in effect.

Author

Links

Made with

About the code

Gmail Image Gallery Animation

Image gallery animation with HTML, CSS and JS.

Author

Links

Made with

About the code

Scrolling & Looping Gallery

Scrolling & looping gallery. Vanilla HTML/CSS/JS. No Touch Events.

Author

Links

Made with

About the code

Photo Gallery

See the gallery by clicking on the windows.

Author

Links

Made with

About the code

Amur Leopard Image Gallery With CSS Vars

Click the info button in the bottom right corner. 😼 WebKit-only because other browsers have poor support for using calc() in place of anything else other than length values.

Portfolio Gallery

HTML, CSS and JavaScript portfolio gallery.
Made by Tanmoy Biswas
February 14, 2017

HTML And CSS Image Gallery

Image gallery with zoom.
Made by wunnle
February 3, 2017

CSS 3D Transform Gallery

Cube rotate 3D transform gallery.
Made by Lorina Gousi
January 30, 2017

Author

Links

Made with

About the code

Gallery Hover Effect

Gallery hover effect and gallery expanded.

Photobox

Photobox is the evolution, the next generation of gallery UI & UX code.
Made by Yair Even Or
January 4, 2017

Travel Gallery

Travel gallery with flexbox and CSS animations/transitions.
Made by Sean Free
January 2, 2017

Slide-out Scrolling Gallery

A gallery that reveals three panels as the user scrolls.
Made by Teegan Lincoln
January 1, 2017

Reflective Photo Gallery Wall

HTML, CSS and JavaScript reflective photo gallery wall experiment.
Made by Shawn Reisner
October 21, 2016

Quad Image Gallery

Transitioned gallery for four images.
Made by Dudley Storey
October 14, 2016

Gallery With Wave Transition Effect

It has 24 1920×1080 pictures inside, so it can take a sec to download. It looks cool though. Feel free to play around with variables (transition times, and delays). You can change the number of pictures. Just change the variables in scss and js. Also, if you want to add new pics, just add the url of the pic in the js array.
Made by Kirill Kiyutin
September 9, 2016

Portfolio Gallery

Portfolio gallery with HTML, CSS and JavaScript.
Made by Srdjan Pajdic
June 2, 2016

Author

Источник

Адаптивные галереи для сайта

Даже опытные веб-мастера зачастую путают понятия «фотогалерея» и «фотоальбом». Основным различием между этими понятиями считается тот факт, что в фотогалереях «на показ» выставляются все доступные фотографии. А вот фотоальбоме изображения появляются по одному.

Стоит заметить, что подобная классификация считается довольно-таки условной. В интернете есть немало примеров, которые практически нереально классифицировать общепринятыми понятиями. Далее проанализируем пример создания стандартной галереи для сайта на html.

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

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

Фотогалереи имеют и несколько недостатков.

1. Во-первых, они громоздки и занимают слишком много места на странице. Из-за этого галереи не всегда органично вписываются в дизайн сайта.
2. Во-вторых, у фотогалерей относительно узкий «спектр действий». Они зачастую подходят только для десктопных версий сайта. На мобильных устройствах галереи в большинстве случаев смотрятся ужасно.

Стандартная фотогалерея

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

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

Для написания главной страницы используются следующий код:

Фотогалерея

Дочерняя страница предусматривает написание такого кода:

Фотогалерея на CSS

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

Адаптивная галерея для сайта на html предусматривает использование следующего кода:

#gall < position: relative; padding-top: 50%; -moz-user-select: none; user-select: none; >#gall img < position: absolute; top: 25%; left: 12.5%; max-width: 24.5%; max-height: 49.5%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: zoom-in; transition: .2s; >#gall img:nth-child(4n-2) #gall img:nth-child(4n-1) #gall img:nth-child(4n) #gall img:nth-child(n+5) #gall img:focus < position: absolute; top: 50%; left: 50%; z-index: 1; max-width: 100%; max-height: 100%; outline: none; pointer-events: none; >#gall img:focus ~ div

Фотогалерея на Jquery

Альтернативным вариантом является создание галереи при помощи JavaScript Framework Jquery. Для написания фотогалереи на основе данной библиотеки необходимы определенные навыки. Но большинство веб-мастеров предпочитает находить готовые плагины и использовать их на своем сайте.

Одним из таких плагинов является Galleria. Преимуществом этой фотогалереи является наличие огромных возможностей для настройки. К преимуществам стоит отнести и корректное отображение галереи практически на всех мобильных устройствах:

Скрипт галереи для сайта – это архив, предназначенный для извлечения программных файлов и размещения на сайте.

В качестве примера подключения рассмотрим всю ту же Galleria:

• Подключение библиотеки Jquery к сайту. Для этого необходимо вставить внутри тега следующую строку:

Проверка подключения Jquery осуществляется при помощи следующего скрипта:

Корректно подключенная библиотека отобразит следующий текст:

• Для установки Galleria нужно скачать архив с галерей, предназначенной для сайта, и распаковать его в директории с html-файлом. Плагин размещается путем написания следующего кода:

Чтобы проверить работоспособность плагина необходимо поместить вместо предыдущего кода следующий:

В том случае, если Galleria подключена корректно, в окне браузера будет написано «Galleria works».

• Установка параметров фотогалереи и ее «заполнение». Для установки цвета, ширины и длины используется класс CSS. С этой целью укажем необходимые значения стилей:

После этого нужно добавить фото для демонстрации:

• Активация плагина и установка темы галереи. Для этого нужно под слоем фотографий написать следующий код:

В данном примере используется стандартная тема. На сайте этого плагина можно скачать и другие темы. Но стоит учитывать, что они все платные:

Далее еще раз укажем весь кода данного примера:

   .galleria     
   
   

WordPress плагин для создания галереи — NextGen Gallery

Сайты, созданные на популярных движках, могут использовать различные специальные расширения. Например, на ресурс, разработанный на WordPress, можно установить плагин NextGen Gallery:

Создание адаптивной галереи онлайн — Cincopa

Адаптивная галерея для сайта также может быть создана посредством специальных онлайн-ресурсов. Примером такого ресурса является Cincopa. В данном случае пользователь может самостоятельно собрать фотогалерею и подобрать под нее цвет и дизайн в соответствии со своими предпочтениями:

Источник