|
@duration: 0.8s; |
|
@ease: cubic-bezier(.4,.0,.3,1); |
|
|
|
@offset: 15%; |
|
@offsetFull: unit(@offset, vw); |
|
/* |
|
If @offset is a percentage, we need to calculate using a vw unit, otherwise the % will not be accurate for the inner `.panel__content` container. |
|
For a fixed width, non-percentage based container, use the same value for both. |
|
*/ |
|
|
|
@textColor: #FFF; |
|
@overlayColor: #000; |
|
@highlightColor: #FFC12D; |
|
@borderColor: @highlightColor; |
|
|
|
/*////////////////////////////////////////*/ |
|
/* Layout */ |
|
|
|
.panels { |
|
width: 100%; |
|
|
|
// max-width: 400px; |
|
// margin: auto; |
|
|
|
height: 28%; |
|
min-height: 200px; |
|
overflow: hidden; |
|
background: @overlayColor; |
|
display: flex; |
|
justify-content: center; |
|
align-items: stretch; |
|
} |
|
|
|
.panel { |
|
display: inline-block; |
|
height: 100%; |
|
position: relative; |
|
flex: 1; |
|
cursor: pointer; |
|
text-decoration: none; |
|
-webkit-tap-highlight-color: transparent; |
|
transition: transform @duration @ease; |
|
} |
|
|
|
/*////////////////////////////////////////*/ |
|
/* Image/Text Container */ |
|
|
|
.panel__content { |
|
height: 100%; |
|
position: absolute; |
|
top: 0; right: 0; bottom: 0; left: 0; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
background: @overlayColor center center no-repeat; |
|
background-size: cover; |
|
transition: transform @duration @ease; |
|
|
|
&:before, |
|
&:after { |
|
content: ''; |
|
position: absolute; |
|
top: 0; right: 0; bottom: 0; left: 0; |
|
opacity: 1; |
|
transition: opacity @duration @ease; |
|
} |
|
|
|
&:before { |
|
background: inherit; |
|
filter: grayscale(100%); |
|
} |
|
|
|
&:after { |
|
background: @overlayColor; |
|
opacity: 0.3; |
|
} |
|
} |
|
|
|
/*////////////////////////////////////////*/ |
|
/* Title */ |
|
|
|
.panel__title { |
|
color: @textColor; |
|
position: relative; |
|
z-index: 1; |
|
transition: color @duration @ease; |
|
width: 100%; |
|
text-align: center; |
|
padding: 1em; |
|
} |
|
|
|
/*////////////////////////////////////////*/ |
|
/* Alignment */ |
|
|
|
.panel { |
|
overflow: hidden; |
|
margin-right: -@offset; |
|
} |
|
|
|
.panel__content { |
|
margin-left: -@offsetFull; |
|
|
|
} |
|
|
|
// .panel__content { |
|
// margin-left: -@offset; |
|
|
|
// width: 100vw; |
|
// left: 50%; |
|
// transform: translateX(-52%); |
|
// //transform: translate3d( unit(-@offset/2,vw), 0, 0); |
|
// //transform: translate3d(-@offsetFull, 0, 0); |
|
// } |
|
|
|
// .panels { |
|
// position: relative; |
|
|
|
// &::before { |
|
// content: ' '; |
|
// border: solid 2px red; |
|
// display: inline-block; |
|
// flex: 1; |
|
// // position: absolute; |
|
// // right: 0; |
|
// // top: 0; |
|
// // width: 100%; |
|
// // height: 100%; |
|
// margin-right: -115%; |
|
// margin-left: 75%; |
|
// z-index: 10; |
|
// background: red; |
|
// opacity: 0.5; |
|
// pointer-events: auto; |
|
// } |
|
// } |
|
|
|
/*////////////////////////////////////////*/ |
|
/* Hover */ |
|
|
|
.panels { |
|
pointer-events: none; |
|
} |
|
|
|
.panel__title { |
|
pointer-events: auto; |
|
} |
|
|
|
/* Make the inactive panels darker */ |
|
.panels:hover .panel__content::after { opacity: 0.7; } |
|
|
|
/* Panels before the active panel */ |
|
.panels:hover .panel { |
|
transform: translate3d( -@offsetFull/ 2 , 0, 0); |
|
} |
|
|
|
/* Panels after the active panel */ |
|
.panel:hover ~ .panel { transform: translate3d( @offsetFull / 2, 0, 0); } |
|
|
|
/* The active panel */ |
|
.panels .panel:hover { |
|
pointer-events: auto; |
|
.panel__content { transform: translate3d(@offsetFull / 2, 0, 0); } |
|
|
|
/* Hide the dark grayscale overlay, revealing the color photo */ |
|
.panel__content::before, |
|
.panel__content::after { opacity: 0; } |
|
} |
|
|
|
.panels .panel:first-child:hover { |
|
transform: translate3d( 0, 0, 0); |
|
~ .panel { transform: translate3d( @offsetFull, 0, 0); } |
|
.panel__content { transform: translate3d( @offsetFull * 0.5, 0, 0); } |
|
} |
|
|
|
.panels .panel:last-child:hover { |
|
.panel__content { transform: translate3d( @offsetFull * 0.25, 0, 0); } |
|
} |
|
|
|
|
|
|
|
/*////////////////////////////////////////*/ |
|
/* Specific Design Setup */ |
|
|
|
@import 'https://fonts.googleapis.com/css?family=Oswald'; |
|
|
|
.panel__title { |
|
font-family: 'Oswald', sans-serif; |
|
text-transform: uppercase; |
|
font-size: 2.5em; |
|
letter-spacing: 0.1em; |
|
|
|
@media (max-width: 800px) { |
|
font-size: 1.5em; |
|
} |
|
@media (max-width: 600px) { |
|
font-size: 1.25em; |
|
} |
|
} |
|
|
|
html, body { height: 100%; } |
