Домой / Для сайта / Галереи / Галерея на CSS
Галерея на CSS

Галерея на CSS

Здравствуйте, друзья! Сегодня я хочу показать вам пример создания галереи изображений на чистом CSS, без использования каких-либо скриптов.

Реализована галерея таким образом, что при загрузке страницы мы видим галерею с изображениями размером 300х400, которые используются для предпросмотра. После клика на изображение — открывается его увеличенная копия размером 800х600. Из этого вытекает, что для создания галереи нам нужно по два изображения на один элемент галереи.

Данный пример достаточно интересный, и я надеюсь, что вам он тоже понравится.

Посмотреть и скачать демо вы можете перейдя по ссылкам ниже.

Демо Скачать

HTML

<input type="checkbox" id="pic-1"/>
<label for="pic-1" class="lightbox"><img src="//unsplash.it/800/600?image=1"/></label>
<input type="checkbox" id="pic-2"/>
<label for="pic-2" class="lightbox"><img src="//unsplash.it/800/600?image=20"/></label>
<input type="checkbox" id="pic-3"/>
<label for="pic-3" class="lightbox"><img src="//unsplash.it/800/600?image=224"/></label>
<input type="checkbox" id="pic-4"/>
<label for="pic-4" class="lightbox"><img src="//unsplash.it/800/600?image=42"/></label>
<input type="checkbox" id="pic-5"/>
<label for="pic-5" class="lightbox"><img src="//unsplash.it/800/600?image=48"/></label>
<input type="checkbox" id="pic-6"/>
<label for="pic-6" class="lightbox"><img src="//unsplash.it/800/600?image=60"/></label>
<input type="checkbox" id="pic-7"/>
<label for="pic-7" class="lightbox"><img src="//unsplash.it/800/600?image=201"/></label>
<input type="checkbox" id="pic-8"/>
<label for="pic-8" class="lightbox"><img src="//unsplash.it/800/600?image=7"/></label>
<input type="checkbox" id="pic-9"/>
<label for="pic-9" class="lightbox"><img src="//unsplash.it/800/600?image=119"/></label>
<input type="checkbox" id="pic-10"/>
<label for="pic-10" class="lightbox"><img src="//unsplash.it/800/600?image=180"/></label>
<input type="checkbox" id="pic-11"/>
<label for="pic-11" class="lightbox"><img src="//unsplash.it/800/600?image=96"/></label>
<input type="checkbox" id="pic-12"/>
<label for="pic-12" class="lightbox"><img src="//unsplash.it/800/600?image=24"/></label>

<div class="grid">
 <label for="pic-1" class="grid-item"><img src="//unsplash.it/400/300?image=1"/></label>
 <label for="pic-2" class="grid-item"><img src="//unsplash.it/400/300?image=20"/></label>
 <label for="pic-3" class="grid-item"><img src="//unsplash.it/400/300?image=224"/></label>
 <label for="pic-4" class="grid-item"><img src="//unsplash.it/400/300?image=42"/></label>
 <label for="pic-5" class="grid-item"><img src="//unsplash.it/400/300?image=48"/></label>
 <label for="pic-6" class="grid-item"><img src="//unsplash.it/400/300?image=60"/></label>
 <label for="pic-7" class="grid-item"><img src="//unsplash.it/400/300?image=201"/></label>
 <label for="pic-8" class="grid-item"><img src="//unsplash.it/400/300?image=7"/></label>
 <label for="pic-9" class="grid-item"><img src="//unsplash.it/400/300?image=119"/></label>
 <label for="pic-10" class="grid-item"><img src="//unsplash.it/400/300?image=180"/></label>
 <label for="pic-11" class="grid-item"><img src="//unsplash.it/400/300?image=96"/></label>
 <label for="pic-12" class="grid-item"><img src="//unsplash.it/400/300?image=24"/></label>
</div>

CSS

* {
 box-sizing: border-box;
}

label[for] {
 cursor: pointer;
}

input[type="checkbox"] {
 display: none;
}

body {
 background-color: #000;
}

.lightbox, .grid {
 width: 100%;
 position: fixed;
 top: 0;
 left: 0;
}

.lightbox {
 z-index: 1;
 min-height: 100%;
 overflow: auto;
 -webkit-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 -webkit-transition: -webkit-transform .5s ease-out;
 transition: transform .5s ease-out;
}
.lightbox img {
 position: fixed;
 top: 50%;
 left: 50%;
 max-width: 96%;
 max-height: 96%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

input[type="checkbox"]:checked + .lightbox {
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}

input[type="checkbox"]:checked ~ .grid {
 opacity: .125;
}

.grid {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-box-align: start;
 -webkit-align-items: flex-start;
 -ms-flex-align: start;
 align-items: flex-start;
 -webkit-align-content: flex-start;
 -ms-flex-line-pack: start;
 align-content: flex-start;
 z-index: 0;
 height: 100%;
 padding: 16px;
 overflow: auto;
 background-color: #222;
 text-align: center;
 -webkit-transition: opacity .75s;
 transition: opacity .75s;
}
.grid .grid-item {
 display: inline-block;
 width: 25%;
 padding: 16px;
 opacity: .75;
 -webkit-transition: opacity .5s;
 transition: opacity .5s;
}
.grid .grid-item:hover {
 opacity: 1;
}
@media screen and (max-width: 1024px) {
 .grid .grid-item {
 width: 50%;
 }
}
@media screen and (max-width: 480px) {
 .grid .grid-item {
 width: 100%;
 }
}
.grid img {
 max-width: 100%;
 max-height: 100%;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

Если у вас возникли вопросы — задавайте их в комментариях.

Здравствуйте, друзья! Сегодня я хочу показать вам пример создания галереи изображений на чистом CSS, без использования каких-либо скриптов. Реализована галерея таким образом, что при загрузке страницы мы видим галерею с изображениями размером 300х400, которые используются для предпросмотра. После клика на изображение - открывается его увеличенная копия размером 800х600. Из этого вытекает, что для создания галереи нам нужно по два изображения на один элемент галереи. Данный пример достаточно интересный, и я надеюсь, что вам он тоже понравится. Посмотреть и скачать демо вы можете перейдя по ссылкам ниже. HTML &lt;input type=&quot;checkbox&quot; id=&quot;pic-1&quot;/&gt; &lt;label for=&quot;pic-1&quot; class=&quot;lightbox&quot;&gt;&lt;img src=&quot;//unsplash.it/800/600?image=1&quot;/&gt;&lt;/label&gt; &lt;input type=&quot;checkbox&quot; id=&quot;pic-2&quot;/&gt;&hellip;

Обзор

Проголосуйте за статью

Оценка

Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.32 ( 9 голосов )
100

21 комментарий

  1. Аватар
    Дмитрий

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

    • Аватар

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

  2. Аватар

    здравствуйте,пишу сайт на html/css,имеется 4 блока,шапка,панелька менюшки,контент и подвал,вставляю вашу галерею в контет(основная информация сайта) а ваша галерея выскакивает поверх всего сайта,хотя я и расположил ее в контента,указал css файл,все как полагается,но хоть ты тресни поверх сайта,проше помочь дельным советом.Заранее спасибо за ответ.

  3. Аватар

    День добрый! А если кол-во картинок не умещается в видимой части блока? Можно прикрутить кнопки для листания вперед-назад? Или это уже не HTML — CSS?

  4. Аватар

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

    HTML:

    Graphic design/contact

    მთავარი
    ჩემს შესახებ
    პორტფოლიო
    კონტაქტი

    CSS

    * {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    }

    @font-face {
    font-family: ‘mari’;
    src: url(‘bpg_arial_2009.ttf’);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘mari2’;
    src: url(‘bpg_mrgvlovani_caps_2010.ttf’);
    font-weight: normal;
    font-style: normal;
    }

    li {
    font-family: ‘mari’;
    }

    h3 {
    font-family: ‘mari2’;
    }

    a {
    font-family: ‘mari2’;
    }

    .block1 {
    width: 1200px;
    height: 300px;
    background: url(‘BANNER.jpg’);
    margin: auto;
    }

    .block2 {
    width: 1200px;
    background: url(‘Menu3.jpg’);
    margin: auto;
    }

    .block1-osno {
    width: 100%;
    background: url(‘BANNER-.png’) repeat-x;
    float: left;
    }

    .block2-osno {
    width: 100%;
    background: url(‘Menu3-gagrzeleba.jpg’) repeat-x;
    float: left;
    }

    .block3-osno {
    width: 100%;
    background: #d5bf90 repeat-x;
    float: left;
    }

    .menu {
    width: 1200px;
    height: 40px;
    background: url(‘Menu3.jpg’);
    list-style-type: none;
    }

    .menu li {
    float: left;
    margin: 0px 0px 0px 0px;
    }

    .menu li a {
    text-decoration: none;
    color: white;
    width: 150px;
    height: 30;
    display: block;
    padding-top: 10px;
    text-align: center;
    margin: 0px 50px 0 90px;
    font-weight: bold;
    }

    .menu li a:hover {
    background: url(‘menu-hover.jpg’);
    border: 1px;
    color: white;
    display: block;
    width: 150px;
    font-weight: bold;
    }

    * {
    box-sizing: border-box;
    }

    label[for] {
    cursor: pointer;
    }

    input[type=»checkbox»] {
    display: none;
    }

    body {
    background-color: #000;
    }

    .lightbox, .grid {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    }

    .lightbox {
    z-index: 1;
    min-height: 100%;
    overflow: auto;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .5s ease-out;
    transition: transform .5s ease-out;
    }
    .lightbox img {
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 96%;
    max-height: 96%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    input[type=»checkbox»]:checked + .lightbox {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    }

    input[type=»checkbox»]:checked ~ .grid {
    opacity: .125;
    }

    .grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    z-index: 0;
    height: 100%;
    padding: 16px;
    overflow: auto;
    background-color: #222;
    text-align: center;
    -webkit-transition: opacity .75s;
    transition: opacity .75s;
    }
    .grid .grid-item {
    display: inline-block;
    width: 25%;
    padding: 16px;
    opacity: .75;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    }
    .grid .grid-item:hover {
    opacity: 1;
    }
    @media screen and (max-width: 1024px) {
    .grid .grid-item {
    width: 50%;
    }
    }
    @media screen and (max-width: 480px) {
    .grid .grid-item {
    width: 100%;
    }
    }
    .grid img {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    помогите пожалуйста

  5. Аватар

    Спасибо. Очень красиво сделано, мне есть куда учиться.

  6. Аватар

    Ух тыыы, красивая галерея. А почему не отвечаете на вопросы?

  7. Аватар

    красиво слов нет, но она не работает нормально, взяла для личного сайта, поменяла фото, и все к чертям.

  8. Аватар

    Спасибо за галерею! Всё прекрасно работает.
    Может быть сможете подсказать, как сделать, чтобы на мобильной версии (когда картинки одним рядом идут) эта галерея работала без увеличения картинок? Т.е. чтобы при нажатии на картинку не выскакивала её увеличенная копия? Спасибо!

  9. Аватар

    Thank you for this editorial, amazing article! I’ve been researching on this area quite a lot these days and came across this online site http://www.wmsystems.net/uncategorized/lies-you-ve-been-told-about-education-flash-15/. Try it out if you need more in-depth information.

  10. Аватар

    Учеба за морем: причины и виды
    В наши дни для работодателя не так главен документ, который заверяет о приобретенном образовании, же абстрактные да утилитарные навыки, который У вас появилась возможность купить в ходе обучения. Как не прискорбно, ВУЗы в нашей стране в большинстве случаев никак не готовы дать те багаж и умения, что просит настоящий рабочий базар. Поэтому из года в год всё больше и намного больше молодых людей делают выбор для учебы за рубежом. Однако пред ними постает вопрос о том, какой-никакую государство и отделение избрать, какой-никакие програмки обучения наиболее доступны и каковы виды устройства на работу после окончанию обучения.
    По данным статистики, среди самых популярных англоязычных государств для учебы, США — занимает лавровый венок. Так как Америка — уругвай больших возможностей, а американские дипломы ценятся во всем мире.
    Какой-никакие занятие во Америка обладает преимущества?
    1. Здесь находятся наилучшие университеты мира, поэтому высшее образование в Америке брать в долг лидирующие позиции;
    Два. Большой указатель предлагаемых специальностей. Вам обладаете возможность получить ту вот профессию об которой грезите и характер специалистом в собственной поле деятельности;
    Три. В тренировочном процессе коренной уклон хорошо на практику. Тренировочные програмки формируются исходя из требований сопровождений, что нуждаются во обученных рабочих кадрах;
    Четыре. Новые схемы и просторная экспериментальная база представлены неустранимой частично обучения во южноамериканском ВУЗе;
    Пятого. Получая устройство в Америка, Вы приобретаете право выбора. В Вашем распоряжении ведь, какие установки, в котором семестре да какой-никакое количество времен нужно выделить на их исследование. Такая система позволяет возвести удобный диаграмма да обучает учащегося самодостаточности;
    6. Опыт жизни в кампусе экстремально соотнести со чем-нибудь еще. Кампус — это удобное место про проживания да учёбы, милые соседи изо различных стран мира, всевозможные спортивные сооружения да площадки, рестораны, клубы да ещё многое на кой леший нужно сидеть на институтской скамье во США.
    http://sysaut.ru/faktora-ravno-vidy-ucheby-za-morjami/

  11. Аватар
    Владимир

    Отличная галерея красивая и настраиваемая, большой респект автору.
    Но проблема описанная верхних коммента, так же присутствует. Невозможно запихнуть галерею в нужный мне участок добавление z-index ничего не дает. все фото сверху и собой закрывают хедер и футер.
    есть в стилях момент, можно ее отодвинуть отступами, но адаптивность и взаимодействие с всей странице теряется. Еще раз спасибо за доступ галерее, но прошу помочь!!!

  12. Аватар

    Очередной раз убеждаюсь что transition создаёт тормоза. Гораздо быстрее передать координаты в css стили с помощью js, для перемещения элементов, либо воспользоваться уже готовыми jQuery методами анимации.

  13. Аватар

    Большое спасибо!!!

  14. Аватар

    Очень хорошая галерея, то что мне нужно, но проблема аналогичная. Галерея перекрывает весь сайт, как можно исправить?

  15. Аватар

    Нашла проблему, это из-за позиционирования. Попробуйте так position: relative;

    • Аватар

      Хорошее решение, но возникают проблемы после добавления кода внутрь CSS контейнера на реальный сайт. Галерея отображается в браузере поверх (вместо) верхней части страницы. Ситуацию можно исправить установив в строке 25 position: fixed; на position: relative; Но при этом перестает работать функция разворачивания и сворачивания фото по клику. Страница застывает в положении последней увеличенной фото из списка. Свернуть фото не получается даже если поменять в строке 41 position: fixed; на position: relative; Может кто подскажет правильный способ лечения этого кода до работающего состояния?

Оставить комментарий

Ваш email не будет опубликован.

*