В этой статье я приведу простой пример создания фотогалереи на чистом CSS, без использования JavaScript и JQuery.
Фотогалерея CSS представляет собой сетку изображений – миниатюр. При щелчке мыши по миниатюре изображение открывается полностью, так же при щелчке мыши закрывается.
Создаём папку Gallery, в ней создаём папку Images идва файла index.html и style.css.
В index.html пишем разметку галереи.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" >
<title>Фотогалерея CSS</title>
</head>
<body>
<div class="wrapper">
<input type="checkbox" id="img1">
<label for="img1" class="lightbox"><img src="images/img1.jpg"></label>
<input type="checkbox" id="img2">
<label for="img2" class="lightbox"><img src="images/img2.jpg"></label>
<input type="checkbox" id="img3">
<label for="img3" class="lightbox"><img src="images/img3.jpg"></label>
<input type="checkbox" id="img4">
<label for="img4" class="lightbox"><img src="images/img4.jpg"></label>
<input type="checkbox" id="img5">
<label for="img5" class="lightbox"><img src="images/img5.jpg"></label>
<input type="checkbox" id="img6">
<label for="img6" class="lightbox"><img src="images/img6.jpg"></label>
<input type="checkbox" id="img7">
<label for="img7" class="lightbox"><img src="images/img7.jpg"></label>
<input type="checkbox" id="img8">
<label for="img8" class="lightbox"><img src="images/img8.jpg"></label>
<input type="checkbox" id="img9">
<label for="img9" class="lightbox"><img src="images/img9.jpg"></label>
<input type="checkbox" id="img10">
<label for="img10" class="lightbox"><img src="images/img10.jpg"></label>
<input type="checkbox" id="img11">
<label for="img11" class="lightbox"><img src="images/img11.jpg"></label>
<input type="checkbox" id="img12">
<label for="img12" class="lightbox"><img src="images/img12.jpg"></label>
<input type="checkbox" id="img13">
<label for="img13" class="lightbox"><img src="images/img13.jpg"></label>
<input type="checkbox" id="img14">
<label for="img14" class="lightbox"><img src="images/img14.jpg"></label>
<input type="checkbox" id="img15">
<label for="img15" class="lightbox"><img src="images/img15.jpg"></label>
<input type="checkbox" id="img16">
<label for="img16" class="lightbox"><img src="images/img16.jpg"></label>
<input type="checkbox" id="img17">
<label for="img17" class="lightbox"><img src="images/img17.jpg"></label>
<input type="checkbox" id="img18">
<label for="img18" class="lightbox"><img src="images/img18.jpg"></label>
<div class="frame">
<label for="img1" class="item"><img src="images/img1.jpg"></label>
<label for="img2" class="item"><img src="images/img2.jpg"></label>
<label for="img3" class="item"><img src="images/img3.jpg"></label>
<label for="img4" class="item"><img src="images/img4.jpg"></label>
<label for="img5" class="item"><img src="images/img5.jpg"></label>
<label for="img6" class="item"><img src="images/img6.jpg"></label>
<label for="img7" class="item"><img src="images/img7.jpg"></label>
<label for="img8" class="item"><img src="images/img8.jpg"></label>
<label for="img9" class="item"><img src="images/img9.jpg"></label>
<label for="img10" class="item"><img src="images/img10.jpg"></label>
<label for="img11" class="item"><img src="images/img11.jpg"></label>
<label for="img12" class="item"><img src="images/img12.jpg"></label>
<label for="img13" class="item"><img src="images/img13.jpg"></label>
<label for="img14" class="item"><img src="images/img14.jpg"></label>
<label for="img15" class="item"><img src="images/img15.jpg"></label>
<label for="img16" class="item"><img src="images/img16.jpg"></label>
<label for="img17" class="item"><img src="images/img17.jpg"></label>
<label for="img18" class="item"><img src="images/img18.jpg"></label>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" >
<title>Фотогалерея CSS</title>
</head>
<body>
<div class="wrapper">
<input type="checkbox" id="img1">
<label for="img1" class="lightbox"><img src="images/img1.jpg"></label>
<input type="checkbox" id="img2">
<label for="img2" class="lightbox"><img src="images/img2.jpg"></label>
<input type="checkbox" id="img3">
<label for="img3" class="lightbox"><img src="images/img3.jpg"></label>
<input type="checkbox" id="img4">
<label for="img4" class="lightbox"><img src="images/img4.jpg"></label>
<input type="checkbox" id="img5">
<label for="img5" class="lightbox"><img src="images/img5.jpg"></label>
<input type="checkbox" id="img6">
<label for="img6" class="lightbox"><img src="images/img6.jpg"></label>
<input type="checkbox" id="img7">
<label for="img7" class="lightbox"><img src="images/img7.jpg"></label>
<input type="checkbox" id="img8">
<label for="img8" class="lightbox"><img src="images/img8.jpg"></label>
<input type="checkbox" id="img9">
<label for="img9" class="lightbox"><img src="images/img9.jpg"></label>
<input type="checkbox" id="img10">
<label for="img10" class="lightbox"><img src="images/img10.jpg"></label>
<input type="checkbox" id="img11">
<label for="img11" class="lightbox"><img src="images/img11.jpg"></label>
<input type="checkbox" id="img12">
<label for="img12" class="lightbox"><img src="images/img12.jpg"></label>
<input type="checkbox" id="img13">
<label for="img13" class="lightbox"><img src="images/img13.jpg"></label>
<input type="checkbox" id="img14">
<label for="img14" class="lightbox"><img src="images/img14.jpg"></label>
<input type="checkbox" id="img15">
<label for="img15" class="lightbox"><img src="images/img15.jpg"></label>
<input type="checkbox" id="img16">
<label for="img16" class="lightbox"><img src="images/img16.jpg"></label>
<input type="checkbox" id="img17">
<label for="img17" class="lightbox"><img src="images/img17.jpg"></label>
<input type="checkbox" id="img18">
<label for="img18" class="lightbox"><img src="images/img18.jpg"></label>
<div class="frame">
<label for="img1" class="item"><img src="images/img1.jpg"></label>
<label for="img2" class="item"><img src="images/img2.jpg"></label>
<label for="img3" class="item"><img src="images/img3.jpg"></label>
<label for="img4" class="item"><img src="images/img4.jpg"></label>
<label for="img5" class="item"><img src="images/img5.jpg"></label>
<label for="img6" class="item"><img src="images/img6.jpg"></label>
<label for="img7" class="item"><img src="images/img7.jpg"></label>
<label for="img8" class="item"><img src="images/img8.jpg"></label>
<label for="img9" class="item"><img src="images/img9.jpg"></label>
<label for="img10" class="item"><img src="images/img10.jpg"></label>
<label for="img11" class="item"><img src="images/img11.jpg"></label>
<label for="img12" class="item"><img src="images/img12.jpg"></label>
<label for="img13" class="item"><img src="images/img13.jpg"></label>
<label for="img14" class="item"><img src="images/img14.jpg"></label>
<label for="img15" class="item"><img src="images/img15.jpg"></label>
<label for="img16" class="item"><img src="images/img16.jpg"></label>
<label for="img17" class="item"><img src="images/img17.jpg"></label>
<label for="img18" class="item"><img src="images/img18.jpg"></label>
</div>
</div>
</body>
</html>
В style.css пишем стили.
body {
margin: 0;
padding: 0;
background: #111;
}
label[for] {
cursor: pointer;
}
input[type="checkbox"] {
display: none;
}
.wrapper {
margin: 0 auto;
overflow: hidden;
width: 900px;
background: #333;
}
.lightbox {
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
overflow: auto;
transform: scale (0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transition: transform .5s ease-out;
-webkit-transition: -webkit-transform .5s ease-out;
}
.lightbox img {
position: absolute;
top: 50%;
left: 450px;
width: 900px;
height: 500px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
input[type="checkbox"]:checked + .lightbox {
transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
}
input[type="checkbox"]:checked ~ .frame {
opacity: .150;
}
.frame {
z-index: 0;
margin: 0 auto;
overflow: auto;
height: 100%;
padding: 15px;
background-color: #222;
text-align: center;
transition: opacity .70s;
-webkit-transition: opacity .70s;
}
.item {
display: inline-block;
width: 25%;
padding: 15px;
opacity: .70;
transition: opacity .5s;
-webkit-transition: opacity .5s;
}
.item:hover {
opacity: 1;
}
.frame img {
width: 80%;
height: 80%;
}
margin: 0;
padding: 0;
background: #111;
}
label[for] {
cursor: pointer;
}
input[type="checkbox"] {
display: none;
}
.wrapper {
margin: 0 auto;
overflow: hidden;
width: 900px;
background: #333;
}
.lightbox {
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
overflow: auto;
transform: scale (0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transition: transform .5s ease-out;
-webkit-transition: -webkit-transform .5s ease-out;
}
.lightbox img {
position: absolute;
top: 50%;
left: 450px;
width: 900px;
height: 500px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
input[type="checkbox"]:checked + .lightbox {
transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
}
input[type="checkbox"]:checked ~ .frame {
opacity: .150;
}
.frame {
z-index: 0;
margin: 0 auto;
overflow: auto;
height: 100%;
padding: 15px;
background-color: #222;
text-align: center;
transition: opacity .70s;
-webkit-transition: opacity .70s;
}
.item {
display: inline-block;
width: 25%;
padding: 15px;
opacity: .70;
transition: opacity .5s;
-webkit-transition: opacity .5s;
}
.item:hover {
opacity: 1;
}
.frame img {
width: 80%;
height: 80%;
}
Скачать исходники.