Веб-мастерская Ларисы ВоронинойФотогалерея CSS
WEB-мастерская Ларисы Ворониной logo

Фотогалерея CSS Янв 25 2017


В этой статье я приведу простой пример создания фотогалереи на чистом 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>

В 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%;
}

Рейтинг@Mail.ru