Домой / Для сайта / Галереи / Галерея на 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.78 ( 8 голосов )
100

14 комментариев

  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. Продать телефон ZTE Москва дорого
    Если требуется срочно продать телефон ZTE в Москве дорого, причем как в рабочем состоянии, так и требующего ремонта – считайте, что вам повезло! Мы, компания «Продать-бу» настоящие профессионалы своего дела! Не первый год, мы помогаем своим клиентам продавать мобильные телефоны срочно и дорого, а также выплачиваем отличное денежное вознаграждение.
    Команда «Продать-бу» — это дипломированные специалисты, занимающиеся выкупом абсолютно любых бу смартфонов бренда ZTE, в том числе нерабочих, с разбитым экраном, сломанных и неисправных. Звоните прямо сейчас и мы организуем продажу смартфона на лучших условиях!
    http://prodat.su/prodat/telefony/mobilnik-zte/

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

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

*