Галерея изображений CSS

• Одна из возможных модификаций этого кода - Простой слайдер для сайта с прокруткой миниатюр
• Простая фотогалерея для сайта
• CSS табы

Сегодня мы посмотрим, как с помощью свойства background сделать простую (минимум кода), адаптивную под разные разрешения монитора галерею изображений CSS. При желании можно реализовать автоматическую смену картинок (ориентироваться можно на код слайдера) или прокрутку миниатюр.

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

<style>
input[name="raz"] {display: none;}


.gallery {position: relative; padding-top: 45%; margin: 0 2.3em; line-height: 0; border-bottom: 4em solid; background: no-repeat 50% 0; background-size: auto 100%;} /* стиль блока */ 

.gallery label {display: inline-block; width: 20%; height: 4em; margin-bottom: -4em; background: no-repeat 50% 50%; background-size: calc(100% - 4px) calc(100% - 4px); cursor: pointer;}
.gallery label:hover {background-color: #686868;} /* стиль при наведении на миниатюру */ 
#raz1:checked ~ .gallery label:nth-of-type(1), /* стиль активного пункта */ 
#raz2:checked ~ .gallery label:nth-of-type(2),
#raz3:checked ~ .gallery label:nth-of-type(3),
#raz4:checked ~ .gallery label:nth-of-type(4),
#raz5:checked ~ .gallery label:nth-of-type(5) {opacity: .5; cursor: default;}

#raz1:checked ~ .gallery, .gallery label:nth-of-type(1) {background-image: url(адрес_изо);}
#raz2:checked ~ .gallery, .gallery label:nth-of-type(2) {background-image: url(адрес_изо);}
#raz3:checked ~ .gallery, .gallery label:nth-of-type(3) {background-image: url(адрес_изо);}
#raz4:checked ~ .gallery, .gallery label:nth-of-type(4) {background-image: url(адрес_изо);}
#raz5:checked ~ .gallery, .gallery label:nth-of-type(5) {background-image: url(адрес_изо);}

.gallery label:before { /* абзац создаёт кнопки-стрелки, которые можно и не использовать */ 
 position: absolute; top: 40%; border-width: 2.3em 1em; border-style: solid;}
#raz1:checked ~ .gallery label:nth-of-type(2):before, 
#raz2:checked ~ .gallery label:nth-of-type(3):before,
#raz3:checked ~ .gallery label:nth-of-type(4):before,
#raz4:checked ~ .gallery label:nth-of-type(5):before,
#raz5:checked ~ .gallery label:nth-of-type(1):before {content: ""; right: -2.3em; border-color: transparent transparent transparent #686868; box-shadow: -2px 0 0 -1px #000;}
#raz1:checked ~ .gallery label:nth-of-type(5):before,
#raz2:checked ~ .gallery label:nth-of-type(1):before, 
#raz3:checked ~ .gallery label:nth-of-type(2):before, 
#raz4:checked ~ .gallery label:nth-of-type(3):before, 
#raz5:checked ~ .gallery label:nth-of-type(4):before {content: ""; left: -2.3em; border-color: transparent #686868 transparent transparent; box-shadow: 2px 0 0 -1px #000;}

#raz1:checked ~ .gallery label:nth-of-type(1):after, /* абзац создаёт названия к изображениям, которые можно и не использовать */ 
#raz2:checked ~ .gallery label:nth-of-type(2):after, 
#raz3:checked ~ .gallery label:nth-of-type(3):after, 
#raz4:checked ~ .gallery label:nth-of-type(4):after, 
#raz5:checked ~ .gallery label:nth-of-type(5):after {content: attr(title); position: absolute; top: -2em; left: 0; width: 100%; text-align: center; font-weight: 900;}
</style>

<input type="radio" checked="checked" name="raz" id="raz1"/><input type="radio" name="raz" id="raz2"/><input type="radio" name="raz" id="raz3"/><input type="radio" name="raz" id="raz4"/><input type="radio" name="raz" id="raz5"/>

<div class="gallery"><label for="raz1" title="название"></label><label for="raz2" title="название"></label><label for="raz3" title="название"></label><label for="raz4" title="название"></label><label for="raz5" title="название"></label></div>