<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>Pure CSS Gallery</h1>
<section class="gallery">
<div class="carousel">
<input type="radio" id="image1" name="gallery-control" checked>
<input type="radio" id="image2" name="gallery-control">
<input type="radio" id="image3" name="gallery-control">
<input type="radio" id="image4" name="gallery-control">
<input type="checkbox" id="fullscreen" name="gallery-fullscreen-control"/>
<div class="wrap">
<figure>
<label for="fullscreen">
<img src="https://unsplash.it/1000/700/?random" alt="image1"/>
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="https://unsplash.it/1200/980/?random" alt="image2"/>
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="https://unsplash.it/1600/880/?random" alt="image3" />
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="https://unsplash.it/2000/1400/?random" alt="image4"/>
</label>
</figure>
</div>
<div class="thumbnails">
<div class="slider"><div class="indicator"></div></div>
<label for="image1" class="thumb" style="background-image: url('https://unsplash.it/700/480/?random')"></label>
<label for="image2" class="thumb" style="background-image: url('https://unsplash.it/700/400/?random')"></label>
<label for="image3" class="thumb" style="background-image: url('https://unsplash.it/700/410/?random')"></label>
<label for="image4" class="thumb" style="background-image: url('https://unsplash.it/700/450/?random')"></label>
</div>
</div>
</section>
/* TODO:
* clean up!
* ===============
* horizontal thumbnails
* at small screens
* and in fullscreen
* ===============
* create Mixins
* ===============
*/
@import "https://fonts.googleapis.com/css?family=Montserrat:400,700|Raleway:300,400";
/* colors */
html {
width: 100%;
height: 100%;
}
body {
background: #efefef;
color: #333;
font-family: "Raleway";
height: 100%;
}
body h1 {
text-align: center;
color: #428BFF;
font-weight: 300;
padding: 40px 0 20px 0;
margin: 0;
}
.gallery {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: relative;
background: white;
width: 70%;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
border-radius: 5px;
}
.gallery input[name$="control"] {
display: none;
}
.gallery .carousel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
position: relative;
height: 70vh;
width: 100%;
}
.gallery .wrap {
width: 100%;
height: 100%;
position: static;
margin: 0 auto;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
margin-right: 20px;
}
.gallery .wrap figure {
padding: 10px;
height: 100%;
min-width: 100%;
-webkit-transition: opacity 0.25s ease-in-out 0.05s;
transition: opacity 0.25s ease-in-out 0.05s;
position: relative;
left: 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
box-sizing: border-box;
text-align: center;
margin: 0;
display: block;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 1;
}
.gallery .wrap figure label {
cursor: zoom-in;
height: auto;
width: 100%;
height: 100%;
position: relative;
display: block;
}
.gallery .wrap figure img {
cursor: inherit;
height: auto;
max-width: 100%;
max-height: 100%;
border-radius: 3px;
margin: 0 auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.gallery .thumbnails {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 60px;
max-height: 100%;
height: auto;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-item-align: center;
align-self: center;
-ms-flex-preferred-size: auto;
flex-basis: auto;
position: relative;
white-space: nowrap;
overflow: hidden;
overflow-y: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 0 10px;
z-index: 20;
}
.gallery .thumbnails .thumb {
min-width: 60px;
height: 60px;
background-position: center center;
background-size: cover;
box-sizing: border-box;
opacity: 0.7;
margin: 5px 0;
-ms-flex-negative: 0;
flex-shrink: 0;
left: 0;
border-radius: 3px;
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-repeat: no-repeat;
}
.gallery .thumbnails .slider {
position: absolute;
display: block;
width: 5px;
height: calc(60px + 10px);
z-index: 2;
margin: 0;
left: 0;
-webkit-transition: all 0.33s cubic-bezier(0.3, 0, 0.33, 1);
transition: all 0.33s cubic-bezier(0.3, 0, 0.33, 1);
}
.gallery .thumbnails .slider .indicator {
width: 100%;
height: 30px;
max-height: calc(100% - 10px);
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: #428BFF;
border-radius: 1px;
}
.gallery input#fullscreen:checked ~ .wrap figure {
position: fixed;
z-index: 10;
height: 100vh;
width: 100vw;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) !important;
transform: translate(-50%, -50%) !important;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.gallery input#fullscreen:checked ~ .wrap figure label {
cursor: zoom-out;
}
.gallery input#fullscreen:checked ~ .wrap figure label img {
-webkit-animation: shadow 0.2s;
animation: shadow 0.2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-direction: forwards;
animation-direction: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
border-radius: 0;
}
.gallery input#image1:checked ~ .wrap figure {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.gallery input#image1:checked ~ .wrap figure:not(:nth-of-type(1)) {
opacity: 0;
}
.gallery input#image1:checked ~ .thumbnails .slider {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.gallery input#image1:checked ~ .thumbnails .thumb:nth-of-type(1) {
opacity: 1;
cursor: default;
}
.gallery input#image2:checked ~ .wrap figure {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.gallery input#image2:checked ~ .wrap figure:not(:nth-of-type(2)) {
opacity: 0;
}
.gallery input#image2:checked ~ .thumbnails .slider {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.gallery input#image2:checked ~ .thumbnails .thumb:nth-of-type(2) {
opacity: 1;
cursor: default;
}
.gallery input#image3:checked ~ .wrap figure {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.gallery input#image3:checked ~ .wrap figure:not(:nth-of-type(3)) {
opacity: 0;
}
.gallery input#image3:checked ~ .thumbnails .slider {
-webkit-transform: translateY(200%);
transform: translateY(200%);
}
.gallery input#image3:checked ~ .thumbnails .thumb:nth-of-type(3) {
opacity: 1;
cursor: default;
}
.gallery input#image4:checked ~ .wrap figure {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.gallery input#image4:checked ~ .wrap figure:not(:nth-of-type(4)) {
opacity: 0;
}
.gallery input#image4:checked ~ .thumbnails .slider {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.gallery input#image4:checked ~ .thumbnails .thumb:nth-of-type(4) {
opacity: 1;
cursor: default;
}
@-webkit-keyframes full {
from {
-webkit-transform: translate(-50%, -50%) scale(0.8);
transform: translate(-50%, -50%) scale(0.8);
}
to {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes full {
from {
-webkit-transform: translate(-50%, -50%) scale(0.8);
transform: translate(-50%, -50%) scale(0.8);
}
to {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
@-webkit-keyframes shadow {
from {
box-shadow: 0 0 0 100vmin rgba(24, 33, 45, 0), 0 0 10vmin rgba(13, 21, 31, 0);
}
to {
box-shadow: 0 0 0 100vmin rgba(24, 33, 45, 0.6), 0 0 10vmin rgba(13, 21, 31, 0.6);
}
}
@keyframes shadow {
from {
box-shadow: 0 0 0 100vmin rgba(24, 33, 45, 0), 0 0 10vmin rgba(13, 21, 31, 0);
}
to {
box-shadow: 0 0 0 100vmin rgba(24, 33, 45, 0.6), 0 0 10vmin rgba(13, 21, 31, 0.6);
}
}