feat: Add a breadcrumb
This commit is contained in:
kbe
482
assets/css/scss/elements/_hoverbox.scss
Normal file
482
assets/css/scss/elements/_hoverbox.scss
Normal file
@@ -0,0 +1,482 @@
|
||||
//
|
||||
// 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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user