<div class="panels">
<div class="panels__container">
<a href="#" class="panel">
<div class="panel__content" style="background-image: url(https://unsplash.it/1000/1100/?image=786);">
<h3 class="panel__title">EXPLORE</h3>
</div>
</a>
<a href="#" class="panel">
<div class="panel__content" style="background-image: url(https://unsplash.it/1000/1100/?image=883)">
<h3 class="panel__title">DISCOVER</h3>
</div>
</a>
</div>
</div>
@duration: 1s;
@ease: cubic-bezier(.6,.0,.2,1);
@offsetSize: 10%;
@contentOffset: @offsetSize * 1.4;
/* @offsetSize * 2 means the content won't appear to move at all. Set to a lower value for squishing effects. */
@textColor: #FFF;
@overlayColor: #000;
@highlightColor: #FFC12D;
@borderColor: @highlightColor;
/*////////////////////////////////////////*/
/* Layout */
.panels {
width: 100%;
height: 100%;
overflow: hidden;
background: @overlayColor;
pointer-events: none;
}
.panels__container {
display: flex;
justify-content: center;
align-items: stretch;
height: 100%;
width: unit( 100 + (@offsetSize * 2),%);
margin: 0 -(@offsetSize);
visibility: hidden;
}
.panel {
display: inline-block;
height: 100%;
visibility: visible;
position: relative;
overflow: hidden;
flex: 1;
cursor: pointer;
text-decoration: none;
}
/*////////////////////////////////////////*/
/* Image/Text Container */
.panel__content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: center center no-repeat;
background-size: cover;
&:before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: @overlayColor;
opacity: 0.5;
transition: opacity @duration @ease;
}
}
/*////////////////////////////////////////*/
/* Title */
.panel__title {
pointer-events: auto;
color: @textColor;
position: relative;
z-index: 1;
transition: color @duration @ease;
&:before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: @overlayColor;
background: fade(@overlayColor,70%);
border: solid 2px @borderColor;
z-index: -1;
padding: 0.5em 1em;
margin: -0.5em -1em;
opacity: 0;
transform: scale(0.9);
transition: all @duration @ease;
transition-property: opacity, transform;
}
}
/*////////////////////////////////////////*/
/* Hover States */
.panel {
transform: translate3d(0,0,0);
transition: transform @duration @ease;
.panel__content {
transform: translateX(@offsetSize);
transition: transform @duration @ease;
}
&:last-child .panel__content {
transform: translateX(-@offsetSize);
}
/* Inactive panel */
.panels:hover & {
transform: translate3d(-@offsetSize, 0, 0);
.panel__content {
transform: translateX(@contentOffset);
&:before { opacity: 0.7; }
}
}
/* Override styles for an inactive panel AFTER the hovered panel */
.panels &:hover ~ & {
transform: translate3d(@offsetSize, 0, 0);
.panel__content {
transform: translateX(-@contentOffset);
}
}
/* Active panel */
.panels &:hover {
z-index: 2;
transform: translate3d(@offsetSize,0,0);
pointer-events: auto;
&:last-child { transform: translate3d(-@offsetSize,0,0); }
.panel__content {
transform: translateX(0%);
&:before { opacity: 0; }
}
.panel__title {
color: @highlightColor;
&:before {
opacity: 1;
transform: scale(1);
}
}
}
}
/*////////////////////////////////////////*/
/* Vertical layout */
.panels--stacked {
.panels__container {
width: 100%;
height: unit( 100 + (@offsetSize * 2),%);
margin: -(@offsetSize) 0;
flex-direction: column;
}
.panel {
height: 50%;
width: 100%;
transform: translate3d(0, 0, 0);
.panel__content {
transform: translate3d(0, @offsetSize, 0);
}
&:last-child .panel__content {
transform: translate3d(0, -@offsetSize,0);
}
}
/* Inactive panel */
&:hover .panel {
transform: translate3d(0, -@offsetSize, 0);
.panel__content {
transform: translate3d(0, @contentOffset, 0);
}
}
/* Override styles for an inactive panel AFTER the hovered panel */
& .panel:hover ~ .panel {
transform: translate3d(0, @offsetSize, 0);
.panel__content {
transform: translate3d(0, -@contentOffset, 0);
}
}
/* Active panel */
& .panel:hover {
transform: translate3d(0, @offsetSize, 0);
&:last-child { transform: translate3d(0, -@offsetSize, 0); }
.panel__content {
transform: translate3d(0, 0, 0);
}
}
}
/* Responsive */
@media (max-width: 550px) {
.panels { .panels--stacked; }
}
/*////////////////////////////////////////*/
/* 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%; }
View Compiled
/* Nothing here! */
This Pen doesn't use any external CSS resources.