Здравствуйте, друзья! Сегодня я хочу показать вам пример создания галереи изображений на чистом 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); }
Если у вас возникли вопросы — задавайте их в комментариях.
Обзор
Проголосуйте за статью
Оценка
Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
галерея установилась хорошо, подредактировал размеры, уменьшил фото
вставляю новые картинки через файловый менеджер, после сохранения всё слетает
вставляю в код HTML не выходит, как действовать
Не могу понять возникшей проблемы, если установилось хорошо — значит все работает и не слетает. К сожалению сказать больше ничего не могу, в WordPress я пока не интегрировал данную галерею.
здравствуйте,пишу сайт на html/css,имеется 4 блока,шапка,панелька менюшки,контент и подвал,вставляю вашу галерею в контет(основная информация сайта) а ваша галерея выскакивает поверх всего сайта,хотя я и расположил ее в контента,указал css файл,все как полагается,но хоть ты тресни поверх сайта,проше помочь дельным советом.Заранее спасибо за ответ.
Здравствуйте!
Я бы с радостью помог, но для этого мне нужно видеть сайт. Дайте ссылку, и я постараюсь Вам помочь. Не видя проблемы трудно что-то сказать.
У меня точно такая же проблема как мне быть?
День добрый! А если кол-во картинок не умещается в видимой части блока? Можно прикрутить кнопки для листания вперед-назад? Или это уже не HTML — CSS?
У меня проблема, есть шапка меню а внизу должна быть галерея, но когда вставляю код, то вся шапка и все меню теряется.
Вот сам код.
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);
}
помогите пожалуйста
Спасибо. Очень красиво сделано, мне есть куда учиться.
Ух тыыы, красивая галерея. А почему не отвечаете на вопросы?
красиво слов нет, но она не работает нормально, взяла для личного сайта, поменяла фото, и все к чертям.
Спасибо за галерею! Всё прекрасно работает.
Может быть сможете подсказать, как сделать, чтобы на мобильной версии (когда картинки одним рядом идут) эта галерея работала без увеличения картинок? Т.е. чтобы при нажатии на картинку не выскакивала её увеличенная копия? Спасибо!
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.
Узнай тут, как приготовить. Вкусный завтрак
Водная диета. Как ПОХУДЕТЬ с помощью воды? Правила водной диеты
Учеба за морем: причины и виды
В наши дни для работодателя не так главен документ, который заверяет о приобретенном образовании, же абстрактные да утилитарные навыки, который У вас появилась возможность купить в ходе обучения. Как не прискорбно, ВУЗы в нашей стране в большинстве случаев никак не готовы дать те багаж и умения, что просит настоящий рабочий базар. Поэтому из года в год всё больше и намного больше молодых людей делают выбор для учебы за рубежом. Однако пред ними постает вопрос о том, какой-никакую государство и отделение избрать, какой-никакие програмки обучения наиболее доступны и каковы виды устройства на работу после окончанию обучения.
По данным статистики, среди самых популярных англоязычных государств для учебы, США — занимает лавровый венок. Так как Америка — уругвай больших возможностей, а американские дипломы ценятся во всем мире.
Какой-никакие занятие во Америка обладает преимущества?
1. Здесь находятся наилучшие университеты мира, поэтому высшее образование в Америке брать в долг лидирующие позиции;
Два. Большой указатель предлагаемых специальностей. Вам обладаете возможность получить ту вот профессию об которой грезите и характер специалистом в собственной поле деятельности;
Три. В тренировочном процессе коренной уклон хорошо на практику. Тренировочные програмки формируются исходя из требований сопровождений, что нуждаются во обученных рабочих кадрах;
Четыре. Новые схемы и просторная экспериментальная база представлены неустранимой частично обучения во южноамериканском ВУЗе;
Пятого. Получая устройство в Америка, Вы приобретаете право выбора. В Вашем распоряжении ведь, какие установки, в котором семестре да какой-никакое количество времен нужно выделить на их исследование. Такая система позволяет возвести удобный диаграмма да обучает учащегося самодостаточности;
6. Опыт жизни в кампусе экстремально соотнести со чем-нибудь еще. Кампус — это удобное место про проживания да учёбы, милые соседи изо различных стран мира, всевозможные спортивные сооружения да площадки, рестораны, клубы да ещё многое на кой леший нужно сидеть на институтской скамье во США.
http://sysaut.ru/faktora-ravno-vidy-ucheby-za-morjami/
Отличная галерея красивая и настраиваемая, большой респект автору.
Но проблема описанная верхних коммента, так же присутствует. Невозможно запихнуть галерею в нужный мне участок добавление z-index ничего не дает. все фото сверху и собой закрывают хедер и футер.
есть в стилях момент, можно ее отодвинуть отступами, но адаптивность и взаимодействие с всей странице теряется. Еще раз спасибо за доступ галерее, но прошу помочь!!!
Очередной раз убеждаюсь что transition создаёт тормоза. Гораздо быстрее передать координаты в css стили с помощью js, для перемещения элементов, либо воспользоваться уже готовыми jQuery методами анимации.
Большое спасибо!!!
Очень хорошая галерея, то что мне нужно, но проблема аналогичная. Галерея перекрывает весь сайт, как можно исправить?
Согласен. Точно такая же проблема. С чем она может быть связана?
Нашла проблему, это из-за позиционирования. Попробуйте так position: relative;
Хорошее решение, но возникают проблемы после добавления кода внутрь CSS контейнера на реальный сайт. Галерея отображается в браузере поверх (вместо) верхней части страницы. Ситуацию можно исправить установив в строке 25 position: fixed; на position: relative; Но при этом перестает работать функция разворачивания и сворачивания фото по клику. Страница застывает в положении последней увеличенной фото из списка. Свернуть фото не получается даже если поменять в строке 41 position: fixed; на position: relative; Может кто подскажет правильный способ лечения этого кода до работающего состояния?