?
áEÓê¤ÎïLwebshll2019
.photostack {
.text-overlay {
position: absolute;
z-index: 999;
top: 50%; left: 50%;
@include translate(-50%, -50%);
.h4 {
color: #fff;
letter-spacing: 0.14em;
}
.on-btn {
margin-top: 40px;
}
}
.bg-overlay {
background-color: rgba(0,0,0,.4);
z-index: 10;
}
figure {
position: relative;
display: inline-block;
background: #fff;
text-align: center;
margin: 5px;
}
}
.photostack-img {
outline: none;
display: block;
background: #f9f9f9;
}
.photostack-back {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
font-family: "Give You Glory", cursive;
color: #a7a0a2;
padding: 50px 40px;
text-align: left;
font-size: 22px;
line-height: 1.25;
z-index: 1;
p {
margin: 0;
span {
text-decoration: line-through;
}
}
}
.photostack-start nav {
opacity: 0;
}
.js {
.photostack {
padding: 0;
height: 450px;
background: #ddd;
position: relative;
text-align: center;
overflow: hidden;
> .gallery {
width: 100%;
height: 100%;
margin: 0 auto;
}
figure {
width: 250px;
height: 280px;
padding: 20px;
position: absolute;
display: block;
background: #fff;
text-align: center;
margin: 0;
}
nav {
position: absolute;
width: 100%;
bottom: 30px;
z-index: 90;
text-align: center;
left: 0;
span {
display: inline-block;
opacity: 1;
width: 9px; height: 9px;
@include rounded(50%);
background-color: #c7c7c7;
margin: 8px;
cursor: pointer;
@include transition(all .3s linear);
&.current {
background-color: $color;
@include scale(1.4);
}
&:last-child {
margin-right: 0;
}
&:after {
content: "\e600";
font-family: 'icons';
font-size: 80%;
speak: none;
display: inline-block;
vertical-align: top;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 30px;
color: #fff;
opacity: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
.current.flip {
-webkit-transform: scale(1) rotateY(-180deg) translateZ(-1px);
transform: scale(1) rotateY(-180deg) translateZ(-1px);
background-color: $color;
}
.flippable::after {
opacity: 1;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
}
}
}
}
}
.photostack-start {
cursor: pointer;
nav {
opacity: 0;
}
}
.js .photostack-start::before {
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.js .photostack::before,
.js .photostack::after {
opacity: 0;
visibility: hidden;
}
.js .photostack-start::before,
.js .photostack-start:hover::after,
.touch .photostack-start::after {
opacity: 1;
visibility: visible;
}
.photostack figure::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: visible;
opacity: 1;
background: rgba(0,0,0,0.05);
-webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}
figure.photostack-current::after {
-webkit-transition: opacity 0.6s, visibility 0s 0.6s;
transition: opacity 0.6s, visibility 0s 0.6s;
opacity: 0;
visibility: hidden;
}
.photostack-transition figure {
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
.photostack-perspective {
-webkit-perspective: 1800px;
perspective: 1800px;
}
.photostack-perspective > .gallery,
.photostack-perspective figure {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.photostack-perspective figure,
.photostack-perspective figure div {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.photostack-perspective figure.photostack-flip {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.csstransformspreserve3d figure.photostack-flip .photostack-back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
display: block;
}
.no-csstransformspreserve3d figure.photostack-showback .photostack-back {
display: block;
}
.no-js .photostack figure {
box-shadow: -2px 2px 0 rgba(0,0,0,0.05);
}
.no-js .photostack figure::after {
display: none;
}
.no-js .photostack figure:nth-child(3n) {
-webkit-transform: translateX(-10%) rotate(5deg);
transform: translateX(-10%) rotate(5deg);
}
.no-js .photostack figure:nth-child(3n-2) {
-webkit-transform: translateY(10%) rotate(-3deg);
transform: translateY(10%) rotate(-3deg);
}
#photostack-1 nav span.current {
background: #888;
-webkit-transform: scale(0.61);
transform: scale(0.61);
}
.gallery-page {
padding-bottom: 0;
}
.gallery-container {
margin-top: 30px;
}
.justified-gallery > a > .caption,
.justified-gallery > div > .caption {
font-family: $la;
font-size: 14px;
font-weight: 400;
padding: 20px 15px;
letter-spacing: 0.03em;
}