482 lines
7.9 KiB
SCSS
482 lines
7.9 KiB
SCSS
//
|
|
// Hover box Styles //
|
|
//
|
|
[class^="hoverbox"] {
|
|
overflow: hidden;
|
|
position: relative;
|
|
@include transform(translate3d(0,0,0));
|
|
display: inline-block;
|
|
img {
|
|
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
}
|
|
}
|
|
|
|
//
|
|
// Hover box - Style 1 //
|
|
//
|
|
.hoverbox-1 {
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
background: get-color("dark", 0.5);
|
|
width: 100%;
|
|
height: 100%;
|
|
@include transition(ease-out 0.12s);
|
|
}
|
|
&:hover, &:focus {
|
|
&:before {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
img {
|
|
@include transform(scale(1.04));
|
|
}
|
|
.hover-content {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.hover-content {
|
|
position: absolute;
|
|
z-index: 2;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
color: get-color("white", 0.7);
|
|
@include transition(ease-out 0.12s);
|
|
h1,h2,h3,h4,h5,h6 {
|
|
color: white;
|
|
}
|
|
&.center {
|
|
top: 50%;
|
|
right: 0;
|
|
left: 0;
|
|
@include transform(translateY(-50%));
|
|
width: 100%;
|
|
margin-top: 5px;
|
|
padding: 0 30px;
|
|
&:hover, &:focus {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
&.bottom {
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
@include transform(translateY(5px));
|
|
width: 100%;
|
|
padding: 30px;
|
|
&:hover, &:focus {
|
|
@include transform(translateY(0));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Hover box - Style 2 //
|
|
//
|
|
.hoverbox-2 {
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
left: 16px;
|
|
@include transform(scale(0.99));
|
|
z-index: 1;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
background: get-color("white", 0.9);
|
|
backdrop-filter: blur(5px);
|
|
@include transition(ease-out 0.12s);
|
|
}
|
|
.hover-content {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 16px;
|
|
left: 16px;
|
|
@include transform(translateY(-50%));
|
|
z-index: 2;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
margin-top: 4px;
|
|
padding: 0 30px;
|
|
@include transition(ease-out 0.12s);
|
|
@include breakpoint-less(md) {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
&:hover, &:focus {
|
|
&:before {
|
|
@include transform(scale(1));
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
img {
|
|
@include transform(scale(1.04));
|
|
}
|
|
.hover-content {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hoverbox-2,
|
|
.hoverbox-3 {
|
|
.hover-content {
|
|
color: $color-primary;
|
|
h1,h2,h3,h4,h5,h6 { color: get-color("dark"); }
|
|
a {
|
|
&:not([class^='button']) {
|
|
color: get-color("dark", 0.9);
|
|
&:hover, &:focus { color: get-color("dark"); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Hover box - Style 3 //
|
|
//
|
|
.hoverbox-3 {
|
|
.hover-content {
|
|
position: absolute;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
left: 16px;
|
|
@include transform(translateY(4px));
|
|
z-index: 1;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
background: get-color("white", 0.9);
|
|
backdrop-filter: blur(5px);
|
|
padding: 30px;
|
|
@include transition(ease-out 0.12s);
|
|
@include breakpoint-less(md) {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
&:hover, &:focus {
|
|
img {
|
|
@include transform(scale(1.04));
|
|
}
|
|
.hover-content {
|
|
@include transform(translateY(0));
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Hover box - Style 4 //
|
|
//
|
|
.hoverbox-4 {
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: get-color("dark", 0.4);
|
|
width: 100%;
|
|
height: 100%;
|
|
@include transition(ease-out 0.12s);
|
|
}
|
|
.content,
|
|
.hover-content {
|
|
position: absolute;
|
|
z-index: 1;
|
|
color: get-color("white", 0.7);
|
|
@include transition(ease-out 0.12s);
|
|
h1,h2,h3,h4,h5,h6 {
|
|
color: white;
|
|
}
|
|
}
|
|
.hover-content {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
&:hover, &:focus {
|
|
&:after {
|
|
background: get-color("dark", 0.5);
|
|
}
|
|
img {
|
|
@include transform(scale(1.04));
|
|
}
|
|
.content {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
.hover-content {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.hoverbox-4 {
|
|
&.center {
|
|
.content,
|
|
.hover-content {
|
|
top: 50%;
|
|
left: 0;
|
|
@include transform(translateY(-50%));
|
|
width: 100%;
|
|
padding: 0 30px;
|
|
}
|
|
.hover-content {
|
|
margin-top: 5px;
|
|
}
|
|
&:hover, &:focus {
|
|
.content {
|
|
margin-top: -5px;
|
|
}
|
|
.hover-content {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
&.bottom {
|
|
.content,
|
|
.hover-content {
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 30px;
|
|
}
|
|
.hover-content {
|
|
@include transform(translateY(5px));
|
|
}
|
|
&:hover, &:focus {
|
|
.content {
|
|
@include transform(translateY(-5px));
|
|
}
|
|
.hover-content {
|
|
@include transform(translateY(0));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Hover box - Style 5 //
|
|
//
|
|
.hoverbox-5 {
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: get-color("dark", 0.4);
|
|
width: 100%;
|
|
height: 100%;
|
|
@include transition(ease-out 0.12s);
|
|
}
|
|
.content,
|
|
.hover-content {
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 30px;
|
|
color: get-color("white", 0.7);
|
|
h1,h2,h3,h4,h5,h6 {
|
|
color: white;
|
|
}
|
|
}
|
|
.content {
|
|
top: 0;
|
|
}
|
|
.hover-content {
|
|
bottom: 0;
|
|
@include transform(translateY(5px));
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
@include transition(ease-out 0.12s);
|
|
}
|
|
&:hover, &:focus {
|
|
&:after {
|
|
background: get-color("dark", 0.5);
|
|
}
|
|
img {
|
|
@include transform(scale(1.04));
|
|
}
|
|
.hover-content {
|
|
@include transform(translateY(0));
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Hover box - Style 6 //
|
|
//
|
|
.hoverbox-6 {
|
|
a {
|
|
display: block;
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
background: get-color("white", 0.1);
|
|
width: 100%;
|
|
height: 100%;
|
|
@include transition(ease-out 0.12s);
|
|
}
|
|
}
|
|
.content {
|
|
position: absolute;
|
|
z-index: 2;
|
|
display: inline-block;
|
|
background: get-color("white", 0.9);
|
|
backdrop-filter: blur(5px);
|
|
padding: 10px 16px;
|
|
color: get-color("dark", 0.9);
|
|
h1,h2,h3,h4,h5,h6 {
|
|
margin: 0;
|
|
color: get-color("dark", 0.9);
|
|
}
|
|
&.top {
|
|
top: 16px;
|
|
left: 16px;
|
|
}
|
|
&.center {
|
|
top: 50%;
|
|
left: 50%;
|
|
@include transform(translate(-50%, -50%));
|
|
}
|
|
&.bottom {
|
|
bottom: 16px;
|
|
left: 16px;
|
|
}
|
|
}
|
|
&:hover, &:focus {
|
|
a {
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
img {
|
|
@include transform(scale(1.04));
|
|
}
|
|
}
|
|
}
|
|
|
|
.hoverbox-7 {
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
background-image: linear-gradient(0deg, get-color("dark", 0.5) 0%, get-color("dark", 0.1) 100%);
|
|
width: 100%;
|
|
height: 100%;
|
|
@include transition(ease-out 0.12s);
|
|
}
|
|
.hover-content {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: get-color("white", 0.7);
|
|
h1,h2,h3,h4,h5,h6 {
|
|
color: white;
|
|
}
|
|
.top {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
-webkit-transform: translateY(5px);
|
|
transform: translateY(5px);
|
|
opacity: 0;
|
|
padding: 30px;
|
|
@include transition(ease-out 0.12s);
|
|
}
|
|
.bottom {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
-webkit-transform: translateY(5px);
|
|
transform: translateY(5px);
|
|
opacity: 0;
|
|
padding: 30px;
|
|
@include transition(ease-out 0.12s);
|
|
}
|
|
}
|
|
&:hover, &:focus {
|
|
&:before {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
img {
|
|
@include transform(scale(1.04));
|
|
}
|
|
.hover-content {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
.top, .bottom {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
.top { @include transition-delay(0.05s); }
|
|
.bottom { @include transition-delay(0.10s); }
|
|
}
|
|
}
|
|
}
|
|
|
|
.hoverbox-1,
|
|
.hoverbox-2,
|
|
.hoverbox-4,
|
|
.hoverbox-5,
|
|
.hoverbox-7 {
|
|
a {
|
|
&:not([class^='button']) {
|
|
color: get-color("white", 0.7);
|
|
&:hover, &:focus { color: white; }
|
|
}
|
|
}
|
|
a {
|
|
&.button-text-1,
|
|
&.button-text-2,
|
|
&.button-text-3 {
|
|
color: get-color("white", 0.8);
|
|
&:hover {
|
|
color: white;
|
|
}
|
|
}
|
|
&.button-text-1 {
|
|
&:before { background: get-color("white", 0.3); }
|
|
&:after { background: white; }
|
|
}
|
|
&.button-text-2 {
|
|
&:before { background: get-color("white", 0.4); }
|
|
&:after { background: white; }
|
|
}
|
|
&.button-text-3 {
|
|
&:before { background: get-color("white", 0.8); }
|
|
&:hover {
|
|
&:before { background: white; }
|
|
}
|
|
}
|
|
}
|
|
} |