Нещодавно довелося робити галерею зображень товару для одного сайту. Переглянувши посилання на побажання замовника, я дійшов висновку що зроблю галерею на самих стилях CSS без використання скриптів.
Для виконання цього задуму нам знадобиться ключовий елемент, статус якого може змінити клік користувача. І цей елемент повинен мати у своєму підпорядкуванні інший елемент. Таким чином при зміні статусу елента користувачем ми можемо змінити CSS як батьківського, так і підпорядкованого йому елемента. Таким елементом я обрав <input type="radio">, який має у свєму підпорядкуванні <label>.
З елементами розібралися. Тепер приступимо до архітектури.
В якості основного контейнеру галереї я обрав звичайний <div>, а роль "несучої конструкції" виконав <ul>.

Ось і сама архітектура галереї:
- <div id="gallery">
- <img id="zero" src="images/zero.gif">
- <ul class="gallery">
- <li>
- <input type="radio" id="pic-1" name="pict" checked />
- <label for="pic-1" style="background-image:url(/images/site/homepage/slides/wdlo7c/wdlo-7c.jpg);"><img src="/images/site/homepage/slides/wdlo7c/wdlo-7c.jpg"/><span>WDLO-7C</span></label>
- <input type="radio" id="pic-2" name="pict" />
- <label for="pic-2" style="background-image:url(/images/site/homepage/slides/wdlo7c/wdlo-7c-u.jpg);"><img src="/images/site/homepage/slides/wdlo7c/wdlo-7c-u.jpg"/><span>WDLO-7C UV</span></label>
- <input type="radio" id="pic-3" name="pict" />
- <label for="pic-3" style="background-image:url(/images/site/homepage/slides/wdlo7c/wdlo-7c-n.jpg);"><img src="/images/site/homepage/slides/wdlo7c/wdlo-7c-n.jpg"/><span>WDLO-7C night</span></label>
- </li>
- </ul>
- </div>
А ось стилі які перетворюють вищенаведений скелет на доволі непогану галерею.
- #gallery {
- float:left;
- width:590px;
- height:600px;
- position:relative;
- }
- ul.gallery {
- display:block;
- float:left;
- width:590px;
- height:auto;
- list-style:none;
- margin:0;
- padding:0;
- }
- ul.gallery>li {
- display:block;
- float:left;
- width:120px;
- height:auto;
- }
- input[type="radio"],label[for]>span {
- display: none;
- }
- label[for] {
- display:block;
- width:55px;
- height:73px;
- cursor:pointer;
- background-position:center;
- background-size:51px 69px;
- background-repeat:no-repeat;
- margin:0 auto 20px auto;
- border:solid 1px #d4d4d4;
- box-shadow:0 0 9px rgba(0,0,0,0.3);
- border-radius:4px;
- }
- label[for]>img {
- width:0px;
- height:0px;
- }
- input[type="radio"]:checked+label[for] {
- cursor:default;
- border:solid 1px #333;
- }
- input[type="radio"]:checked+label[for]>img {
- display:block;
- position:absolute;
- top:0px;
- left:120px;
- width:447px;
- height:594px;
- border:solid 1px #d4d4d4;
- padding:2px;
- }
- input[type="radio"]:checked+label[for]>span {
- display:table-cell;
- position:absolute;
- top:20px;
- left:120px;
- width:auto;
- height:20px;
- color:#fff;
- background-color:orange;
- text-align:center;
- z-index:25;
- font-size:16px;
- vertical-align:middle;
- padding:5px 25px;
- }
- img#zero {
- display:block;
- position:absolute;
- top:0px;
- left:120px;
- width:452px;
- height:600px;
- z-index:30;
- }
Ну і, звісно, сама галерея. Анімацію я не додавав, але звичайний transition зробить її ще цікавішою.

До речі, сьогодні з цієї ж конструкції, але з іншими CSS зробив прикольний слайдер відгуків. Пізніше додам, бо все на роботі.
Якщо виникають питання, залишайте їх у коментарях. Відповім.