CSS3 фото-галерея

Сегодня я покажу вам как сделать галерею изображений на CSS3. Галерея будет представлять собой набор эскизов, при наведении курсора на которые их размер будет увеличиваться, а основное изображение будет меняется в зависимости от того, какая миниатюра была нажата.

HTML

Итак, во-первых, нам понадобится несложная HTML-разметка.

<div id="images">
 <section id="thumbnails">
 </section>
 <section id="mainimage">
 <div id="imageplaceholder"></div>
 </section>
</div>

Там есть основной DIV с id “images”. Этот блок вроде контейнера, который содержит весь контент на странице. Кроме того, там есть секция “thumbnails” – она содержит миниатюры. Далее идет div “mainimage”. Он содержит основное изображение, которое изменяется в зависимости от того по какой миниатюре кликнули. Внутри “mainimage” находится блок с id “imageplaceholder”. Этот блок содержит изображение по-умолчанию.

<section id="thumbnails">

 <div class="image">
 <a href="#test1">
 <img src="images/test1.jpg">
 </a>
 </a>
 </div>

 <div class="image">
 <a href="#test2">
 <img src="images/test2.jpg">
 </a>
 </div>

 <div class="image">
 <a href="#test3">
 <img src="images/test3.jpg">
 </a>
 </div>

 <div class="image">
 <a href="#test4">
 <img src="images/test4.jpg">
 </a>
 </div>

 <div class="image">
 <a href="#test5">
 <img src="images/test5.jpg">
 </a>
 </div>

 <div class="image">
 <a href="#test6">
 <img src="images/test6.jpg">
 </a>
 </div>

 <div class="image">
 <a href="#test7">
 <img src="images/test7.jpg">
 </a>
 </div>

 <div class="image">
 <a href="#test8">
 <img src="images/test8.jpg">
 </a>
 </div>

 <div class="image">
 <a href="#test9">
 <img src="images/test9.jpg">
 </a>
 </div>

</section>

Да, тут много эскизов. Но что это за галерея изображений, которая обходится без множества эскизов? Теперь, обратите внимание на то, что там есть ссылка на каждую миниатюру, в виде #test, а затем номер. Это нужно затем, что мы будем использовать псевдо-селектор “:target”.

<section id="mainimage">

 <div id="test1">
 <div id="test2">
 <div id="test3">
 <div id="test4">
 <div id="test5">
 <div id="test6">
 <div id="test7">
 <div id="test8">
 <div id="test9">

 <div id="imageplaceholder"></div>

 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

</section>

Да, это выглядит не очень красиво, я признаю, – но я и не говорил, что это будет семантический код, не так ли? Каждый DIV имеет id “test”, а затем номер. Этот id соответствует “href” в ссылке миниатюры.




Теперь, когда мы закончили с простым и совершенно несложным HTML, давайте двигаться дальше.

CSS3

Вначале вставим reset-стили Эрика Мейера. После того как вы сделали это, перейдем непосредственно к галерее.

body {
background: #f8f8f8;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#images {
padding-top: 100px;
width: 880px;
height: 440px;
margin: 0 auto;
}

#thumbnails {
float: left;
width: 440px;
margin-top: 20px;
}

#mainimage {
float: right;
width: 430px;
height: 430px;
background: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 3px 1px #989898;
-moz-box-shadow: 0px 0px 3px 1px #989898;
box-shadow: 0px 0px 3px 1px #989898;
padding: 5px;
}

#mainimage img {
width: 430px;
height: 430px;
}

Это был основной дизайн макета. Он имеет ширину 880px, а оба раздела по 440px.

.image {
opacity: 0.8;
position: relative;
float: left;
background: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 3px 1px #989898;
-moz-box-shadow: 0px 0px 3px 1px #989898;
box-shadow: 0px 0px 3px 1px #989898;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
padding: 5px;
width:90px;
height: 90px;
margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
}

.image img {
width: 90px;
height: 90px;
}

.image:hover {
cursor: pointer;
opacity: 1;
z-index: 5;
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}

#imageplaceholder {
background: url('images/test1.jpg');
background-size: 100%;
width: 430px;
height: 430px;
}

#test1:target #imageplaceholder{
background: url('images/test1.jpg');
}

#test2:target #imageplaceholder{
background: url('images/test2.jpg');
}

#test3:target #imageplaceholder{
background: url('images/test3.jpg');
}

#test4:target #imageplaceholder{
background: url('images/test4.jpg');
}

#test5:target #imageplaceholder{
background: url('images/test5.jpg');
}

#test6:target #imageplaceholder{
background: url('images/test6.jpg');
}

#test7:target #imageplaceholder{
background: url('images/test7.jpg');
}

#test8:target #imageplaceholder{
background: url('images/test8.jpg');
}

#test9:target #imageplaceholder{
background: url('images/test9.jpg');
}