/*————————————
Block Hovers
————————————*/
// // Common Styles
//
- class*=“u-block-hover”
-
{
position: relative; max-width: 100%; margin: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); &, &::before, &::after { transition: all .3s ease; }
}
.u-block-hover–uncroped {
overflow: visible;
}
.u-block-hover–uncroped:hover {
z-index: 2;
}
.u-block-hover__img {
max-width: 100%; vertical-align: top;
}
.u-block-hover__block {
min-height: 100%;
}
- class*=“u-block-hover__additional”
-
{
position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}
- class*=“u-block-hover__additional–v1”
-
{ // Z
position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 15px; opacity: 0;
}
// // Opacity // Z //
.u-block-hover:hover .u-block-hover__additional–v1 {
opacity: 1;
}
// // Box-shadow //
.u-block-hover–shadow {
&:hover, &:hover .u-block-hover__additional-shadow { box-shadow: 0 0 10px $g-color-gray-dark-v4; } &-v2:hover, &-v2:hover .u-block-hover__additional-shadow { box-shadow: 0 0 15px $g-color-gray-light-v3; } &-v3:hover, &-v3:hover .u-block-hover__additional-shadow { box-shadow: 0 0 3px $g-color-gray-light-v3; }
}
// // Scale //
.u-block-hover–scale:hover, .u-block-hover–scale-img:hover .u-block-hover__img {
transform: scale3d(1.1, 1.1, 1.1);
}
.u-block-hover__additional-scale {
z-index: -1; max-width: initial;
}
.u-block-hover:hover .u-block-hover__additional-scale {
top: -20px; right: -20px; bottom: -20px; left: -20px;
}
.u-block-hover–scale-down:hover, .u-block-hover–scale-down-img:hover .u-block-hover__img {
transform: scale3d(.9, .9, .9);
}
.u-block-hover__additional-scale-down {
z-index: -1; max-width: initial;
}
.u-block-hover:hover .u-block-hover__additional-scale-down {
top: 20px; right: 20px; bottom: 20px; left: 20px;
}
// // Zoom v1 //
.u-block-hover__main–zoom-v1 {
// Improvement flashing issue for Chrome browser -webkit-transform: scale(1.01);
}
.u-block-hover:hover .u-block-hover__main–zoom-v1 {
transform: scale(1.1);
}
// temperory solution for icons (cut issue) // relative position issue with backface-visibility .u-block-hover [class*=“icon-”] {
padding: 1px;
}
// // Filters //
// Grayscale .u-block-hover__main–grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; -webkit-filter: grayscale(100%);
} .u-block-hover:hover .u-block-hover__main–grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); -webkit-filter: grayscale(0%);
}
// White .u-block-hover__main–white {
filter: brightness(0) invert(1);
}
// // Blur //
.u-block-hover__additional–blur {
opacity: 0;
.u-block-hover:hover & {
opacity: 1; transition-delay: .11s;
} } .u-block-hover:hover .u-block-hover__main–blur {
filter: blur(30px); transform: scale(1.2); opacity: 0;
}
// // Overlays //
[class*=“u-block-hover-image-overlay”]::after {
content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: all .35s ease;
} .u-block-hover:hover .u-block-hover-image-overlay::after {
opacity: 1;
}
// // Fade //
.u-block-hover__additional–fade {
opacity: 0; .u-block-hover:hover & { opacity: 1; transform: translate(0, 0); } // Fade up &-up { transform: translate(0, 15%); } // Fade down &-down { transform: translate(0, -15%); } // Fade left &-left { transform: translate(-15%, 0); } // Fade right &-right { transform: translate(15%, 0); }
}
// // Push //
.u-block-hover:hover [class*=“u-block-hover__additional–push”] {
transform: translate(0, 0);
}
// Push up .u-block-hover:hover .u-block-hover__main–push-up {
transform: translateY(-100%);
} .u-block-hover__additional–push-up {
transform: translateY(100%);
}
// Push down .u-block-hover:hover .u-block-hover__main–push-down {
transform: translateY(100%);
} .u-block-hover__additional–push-down {
transform: translateY(-100%);
}
// Push left .u-block-hover:hover .u-block-hover__main–push-left {
transform: translateX(-100%);
} .u-block-hover__additional–push-left {
transform: translateX(100%);
}
// Push right .u-block-hover:hover .u-block-hover__main–push-right {
transform: translateX(100%);
} .u-block-hover__additional–push-right {
transform: translateX(-100%);
}
// // Slide //
.u-block-hover:hover [class*=“u-block-hover__additional–slide”], .u-block-hover:hover [class*=“u-block-hover__additional–partially-slide”] {
transform: translate(0, 0);
}
// Slide up .u-block-hover__additional–slide-up {
transform: translateY(100%);
}
// Slide up .u-block-hover__additional–slide-down {
transform: translateY(-100%);
}
// Slide left .u-block-hover__additional–slide-left {
transform: translateX(100%);
}
// Slide right .u-block-hover__additional–slide-right {
transform: translateX(-100%);
}
// Slide bottom-right .u-block-hover__additional–slide-bottom-right {
transform: translate(-100%, -100%);
}
// Slide bottom-left .u-block-hover__additional–slide-bottom-left {
transform: translate(100%, -100%);
}
// Slide top-right .u-block-hover__additional–slide-top-right {
transform: translate(-100%, 100%);
}
// Slide top-left .u-block-hover__additional–slide-top-left {
transform: translate(100%, 100%);
}
// Partially slide-up .u-block-hover__additional–partially-slide-up {
top: auto; transform: translate3d(0, 100%, 0); overflow: visible; .u-block-hover__visible { position: absolute; bottom: 100%; margin-bottom: -1px; left: 0; right: 0; padding-left: inherit; padding-right: inherit; background: inherit; }
}
// Partially slide-down .u-block-hover__additional–partially-slide-down {
bottom: auto; transform: translate3d(0, -100%, 0); overflow: visible; .u-block-hover__visible { position: absolute; top: 100%; margin-top: -1px; left: 0; right: 0; padding-left: inherit; padding-right: inherit; background: inherit; }
}
// // Cot //
.u-block-hover–cot {
perspective: 50em;
}
- class*=“u-block-hover__additional–cot”
-
{
opacity: 0; z-index: 1;
} .u-block-hover–cot:hover [class*=“u-block-hover__main–cot”] {
opacity: 0;
} .u-block-hover–cot:hover [class*=“u-block-hover__additional–cot”] {
opacity: 1; transition-delay: 0.21s;
}
// Cot up .u-block-hover__main–cot-up {
transform-origin: 50% 0;
} .u-block-hover__additional–cot-up {
transform: rotateX(90deg); transform-origin: 50% 100%;
} .u-block-hover–cot:hover .u-block-hover__main–cot-up {
transform: rotateX(-90deg);
} .u-block-hover–cot:hover .u-block-hover__additional–cot-up {
transform: rotateX(0deg);
}
// Cot down .u-block-hover__main–cot-down {
transform-origin: 50% 100%;
} .u-block-hover__additional–cot-down {
transform: rotateX(-90deg); transform-origin: 50% -50%;
} .u-block-hover–cot:hover .u-block-hover__main–cot-down {
transform: rotateX(90deg); opacity: 0;
} .u-block-hover–cot:hover .u-block-hover__additional–cot-down {
transform: rotateX(0deg);
}
// Cot left .u-block-hover__main–cot-left {
transform-origin: 0% 50%;
} .u-block-hover__additional–cot-left {
transform: rotateY(-90deg); transform-origin: 100% 50%;
} .u-block-hover–cot:hover .u-block-hover__main–cot-left {
transform: rotateY(90deg);
} .u-block-hover–cot:hover .u-block-hover__additional–cot-left {
transform: rotateY(0deg);
}
// Cot right .u-block-hover__main–cot-right {
transform-origin: 100% 50%;
} .u-block-hover__additional–cot-right {
transform: rotateY(90deg); transform-origin: 0 50%;
} .u-block-hover–cot:hover .u-block-hover__main–cot-right {
transform: rotateY(-90deg);
} .u-block-hover–cot:hover .u-block-hover__additional–cot-right {
transform: rotateY(0deg);
}
// // Flip //
.u-block-hover–flip {
perspective: 50em;
}
- class*=“u-block-hover__main–flip”
-
{
backface-visibility: hidden;
}
- class*=“u-block-hover__additional–flip”
-
{
opacity: 0;
} .u-block-hover–flip:hover [class*=“u-block-hover__main–flip”] {
opacity: 0;
} .u-block-hover–flip:hover [class*=“u-block-hover__additional–flip”] {
opacity: 1; transition-delay: 0.13999999999999999s;
}
// Flip horizontal .u-block-hover__additional–flip-horiz {
transform: rotateX(90deg); transform-origin: 0 50%;
} .u-block-hover–flip:hover .u-block-hover__main–flip-horiz {
transform: rotateX(-180deg);
} .u-block-hover–flip:hover .u-block-hover__additional–flip-horiz {
transform: rotateX(0deg);
}
// Flip vertical .u-block-hover__additional–flip-vert {
transform: rotateY(90deg); transform-origin: 50% 0%;
} .u-block-hover–flip:hover .u-block-hover__main–flip-vert {
transform: rotateY(-180deg);
} .u-block-hover–flip:hover .u-block-hover__additional–flip-vert {
transform: rotateY(0deg);
}
// Flip diagonal-1 .u-block-hover__additional–flip-diag-1 {
transform: rotate3d(1, 1, 0, 100deg);
} .u-block-hover–flip:hover .u-block-hover__main–flip-diag-1 {
transform: rotate3d(-1, -1, 0, 100deg);
} .u-block-hover–flip:hover .u-block-hover__additional–flip-diag-1 {
transform: rotate3d(0, 0, 0, 0deg);
}
// Flip diagonal-2 .u-block-hover__additional–flip-diag-2 {
transform: rotate3d(1, -1, 0, 100deg);
} .u-block-hover–flip:hover .u-block-hover__main–flip-diag-2 {
transform: rotate3d(-1, 1, 0, 100deg);
} .u-block-hover–flip:hover .u-block-hover__additional–flip-diag-2 {
transform: rotate3d(0, 0, 0, 0deg);
}
// // Fold //
.u-block-hover–fold {
perspective: 50em;
}
- class*=“u-block-hover__main–fold”
-
{
transform-origin: 50% 0;
}
- class*=“u-block-hover__additional–fold”
-
{
z-index: 1; opacity: 0;
} .u-block-hover–fold:hover [class*=“u-block-hover__main–fold”] {
opacity: 0; transition-delay: 0;
} .u-block-hover–fold:hover [class*=“u-block-hover__additional–fold”] {
transform: rotateX(0deg) translate3d(0, 0, 0) scale(1); opacity: 1; transition-delay: .21s;
}
// Flip-up .u-block-hover__main–fold-up {
transform-origin: 50% 0;
} .u-block-hover__additional–fold-up {
transform: rotateX(-90deg) translate3d(0, -50%, 0) scale(.6); transform-origin: 50% 100%;
} .u-block-hover–fold:hover .u-block-hover__main–fold-up {
transform: rotateX(90deg) scale(.6) translateY(50%);
}
// Flip-down .u-block-hover__main–fold-down {
transform-origin: 50% 100%;
} .u-block-hover__additional–fold-down {
transform: rotateX(90deg) translate3d(0, 50%, 0) scale(.6); transform-origin: 50% 0;
} .u-block-hover–fold:hover .u-block-hover__main–fold-down {
transform: rotateX(-90deg) scale(.6) translateY(-50%);
}
// Flip-left .u-block-hover__main–fold-left {
transform-origin: 0 50%;
} .u-block-hover__additional–fold-left {
transform: rotateY(90deg) translate3d(-50%, 0, 0) scale(.6); transform-origin: 100% 50%;
} .u-block-hover–fold:hover .u-block-hover__main–fold-left {
transform: rotateY(-90deg) scale(.6) translateX(50%);
}
// Flip-right .u-block-hover__main–fold-right {
transform-origin: 100% 50%;
} .u-block-hover__additional–fold-right {
transform: rotateY(-90deg) translate3d(50%, 0, 0) scale(.6); transform-origin: 0 50%;
} .u-block-hover–fold:hover .u-block-hover__main–fold-right {
transform: rotateY(90deg) scale(.6) translateX(-50%);
}
// // Zoom-in //
.u-block-hover__additional–zoom-in {
opacity: 0; transform: scale(.5);
} .u-block-hover:hover .u-block-hover__additional–zoom-in {
transform: scale(1); opacity: 1;
}
// // Zoom-out //
.u-block-hover__additional–zoom-out {
transform: scale(.5); transform-origin: 50% 50%; opacity: 0;
} .u-block-hover:hover .u-block-hover__main–zoom-out {
transform: scale(.5); opacity: 0;
} .u-block-hover:hover .u-block-hover__additional–zoom-out {
transform: scale(1); opacity: 1; transition-delay: .35s;
}
// // Shutter-out //
[class*=“u-block-hover–shutter-out”]::after {
content: ""; position: absolute; transition-delay: .105s; z-index: 1;
} .u-block-hover__additional–shutter-out {
opacity: 0; transition-delay: 0s; z-index: 2;
} [class*=“u-block-hover–shutter-out”]:hover::after {
transition-delay: 0s;
} [class*=“u-block-hover–shutter-out”]:hover .u-block-hover__additional–shutter-out {
opacity: 1; transition-delay: .105s;
}
// Shutter-out horizontal .u-block-hover–shutter-out-horiz::after {
left: 50%; right: 50%; top: 0; bottom: 0;
} .u-block-hover–shutter-out-horiz:hover::after {
left: 0; right: 0;
}
// Shutter-out vertical .u-block-hover–shutter-out-vert::after {
top: 50%; bottom: 50%; left: 0; right: 0;
} .u-block-hover–shutter-out-vert:hover::after {
top: 0; bottom: 0;
}
// Shutter-out diagonal-1 .u-block-hover–shutter-out-diag-1::after {
top: 50%; bottom: 50%; left: -35%; right: -35%; transform: rotate(45deg);
} .u-block-hover–shutter-out-diag-1:hover::after {
top: -35%; bottom: -35%;
}
// Shutter-out diagonal-2 .u-block-hover–shutter-out-diag-2::after {
top: 50%; bottom: 50%; left: -35%; right: -35%; transform: rotate(-45deg);
} .u-block-hover–shutter-out-diag-2:hover::after {
top: -35%; bottom: -35%;
}
// // Shutter-in //
[class*=“u-block-hover–shutter-in”]::after, [class*=“u-block-hover–shutter-in”]::before {
content: ""; position: absolute; z-index: 1;
} [class*=“u-block-hover–shutter-in”]::after {
top: 0; left: 0;
} [class*=“u-block-hover–shutter-in”]::before {
right: 0; bottom: 0;
} .u-block-hover__additional–shutter-in {
opacity: 0; z-index: 2;
} [class*=“u-block-hover–shutter-in”]:hover .u-block-hover__additional–shutter-in {
opacity: 1; transition-delay: .21s;
}
// Shutter-in horizontal .u-block-hover–shutter-in-horiz::after, .u-block-hover–shutter-in-horiz::before {
width: 0; height: 100%;
} .u-block-hover–shutter-in-horiz:hover::after, .u-block-hover–shutter-in-horiz:hover::before {
width: 100%;
}
// Shutter-in horizontal .u-block-hover–shutter-in-vert::after, .u-block-hover–shutter-in-vert::before {
height: 0; width: 100%;
} .u-block-hover–shutter-in-vert:hover::after, .u-block-hover–shutter-in-vert:hover::before {
height: 100%;
}
// Shutter-in diagonal-1 .u-block-hover–shutter-in-diag-1::after, .u-block-hover–shutter-in-diag-1::before {
width: 200%; height: 200%; transition: all .6s ease;
} .u-block-hover–shutter-in-diag-1::after {
transform: skew(-45deg) translateX(-150%);
} .u-block-hover–shutter-in-diag-1::before {
transform: skew(-45deg) translateX(150%);
} .u-block-hover–shutter-in-diag-1:hover::after {
transform: skew(-45deg) translateX(-50%);
} .u-block-hover–shutter-in-diag-1:hover::before {
transform: skew(-45deg) translateX(50%);
}
// Shutter-in diagonal-2 .u-block-hover–shutter-in-diag-2::after, .u-block-hover–shutter-in-diag-2::before {
width: 200%; height: 200%; transition: all .6s ease;
} .u-block-hover–shutter-in-diag-2::after {
transform: skew(45deg) translateX(-100%);
} .u-block-hover–shutter-in-diag-2::before {
transform: skew(45deg) translateX(100%);
} .u-block-hover–shutter-in-diag-2:hover::after {
transform: skew(45deg) translateX(0);
} .u-block-hover–shutter-in-diag-2:hover::before {
transform: skew(45deg) translateX(0);
}
// // Shutter-in-out //
[class*=“u-block-hover–shutter-in-out”]::after, [class*=“u-block-hover–shutter-in-out”]::before {
content: ""; position: absolute; z-index: 1;
} [class*=“u-block-hover–shutter-in-out”]::after {
top: 0; left: 0;
} [class*=“u-block-hover–shutter-in-out”]::before {
right: 0; bottom: 0;
} .u-block-hover__additional–shutter-in-out {
opacity: 0; z-index: 2;
} [class*=“u-block-hover–shutter-in-out”]:hover .u-block-hover__additional–shutter-in-out {
opacity: 1; transition-delay: .21s;
}
// Shutter-in-out horizontal .u-block-hover–shutter-in-out-horiz::after, .u-block-hover–shutter-in-out-horiz::before {
width: 0; height: 100%;
} .u-block-hover–shutter-in-out-horiz:hover::after, .u-block-hover–shutter-in-out-horiz:hover::before {
width: 100%; opacity: .75;
}
// Shutter-in-out horizontal .u-block-hover–shutter-in-out-vert::after, .u-block-hover–shutter-in-out-vert::before {
height: 0; width: 100%;
} .u-block-hover–shutter-in-out-vert:hover::after, .u-block-hover–shutter-in-out-vert:hover::before {
height: 100%; opacity: .75;
}
// Shutter-in-out diagonal-1 .u-block-hover–shutter-in-out-diag-1::after, .u-block-hover–shutter-in-out-diag-1::before {
width: 200%; height: 200%; transition: all .6s ease; opacity: .75;
} .u-block-hover–shutter-in-out-diag-1::after {
transform: skew(-45deg) translateX(-150%);
} .u-block-hover–shutter-in-out-diag-1::before {
transform: skew(-45deg) translateX(150%);
} .u-block-hover–shutter-in-out-diag-1:hover::after {
transform: skew(-45deg) translateX(-50%);
} .u-block-hover–shutter-in-out-diag-1:hover::before {
transform: skew(-45deg) translateX(50%);
}
// Shutter-in-out diagonal-2 .u-block-hover–shutter-in-out-diag-2::after, .u-block-hover–shutter-in-out-diag-2::before {
width: 200%; height: 200%; transition: all .6s ease; opacity: .75;
} .u-block-hover–shutter-in-out-diag-2::after {
transform: skew(45deg) translateX(-100%);
} .u-block-hover–shutter-in-out-diag-2::before {
transform: skew(45deg) translateX(100%);
} .u-block-hover–shutter-in-out-diag-2:hover::after {
transform: skew(45deg) translateX(0);
} .u-block-hover–shutter-in-out-diag-2:hover::before {
transform: skew(45deg) translateX(0);
}
// // Strip shutter //
.u-block-hover–strip-shutter::before, .u-block-hover–strip-shutter::after, .u-block-hover__additional–strip-shutter::before, .u-block-hover__additional–strip-shutter::after {
content: ""; position: absolute; top: 0; width: 25%; height: 100%; transform: scaleY(0); opacity: 0;
} .u-block-hover–strip-shutter::before, .u-block-hover–strip-shutter::after {
z-index: 1;
} .u-block-hover–strip-shutter::before {
left: 0; transition-delay: 0s;
} .u-block-hover–strip-shutter::after {
left: 25%; transition-delay: .105s;
} .u-block-hover__additional–strip-shutter {
z-index: 3;
} .u-block-hover__additional–strip-shutter::before, .u-block-hover__additional–strip-shutter::after {
z-index: -1;
} .u-block-hover__additional–strip-shutter::before {
left: 50%; transition-delay: .21s;
} .u-block-hover__additional–strip-shutter::after {
left: 75%; transition-delay: .35s;
} .u-block-hover–strip-shutter:hover::before, .u-block-hover–strip-shutter:hover::after, .u-block-hover–strip-shutter:hover .u-block-hover__additional–strip-shutter::before, .u-block-hover–strip-shutter:hover .u-block-hover__additional–strip-shutter::after {
transform: scale(1); opacity: 1;
} .u-block-hover__additional–strip-shutter__inner {
opacity: 0;
} .u-block-hover–strip-shutter:hover .u-block-hover__additional–strip-shutter__inner {
opacity: 1; transition-delay: .35s;
}
// // Tile //
.u-block-hover–tile::before, .u-block-hover–tile::after, .u-block-hover__additional–tile::before, .u-block-hover__additional–tile::after {
content: ""; position: absolute; width: 50%; height: 50%; transform: scale(0); opacity: 0;
} .u-block-hover–tile::before, .u-block-hover–tile::after {
z-index: 1;
} .u-block-hover–tile::before {
top: 0; left: 0; transition-delay: 0s;
} .u-block-hover–tile::after {
top: 0; left: 50%; transition-delay: .105s;
} .u-block-hover__additional–tile {
z-index: 3;
} .u-block-hover__additional–tile::before, .u-block-hover__additional–tile::after {
z-index: -1;
} .u-block-hover__additional–tile::before {
top: 50%; left: 0; transition-delay: .21s;
} .u-block-hover__additional–tile::after {
top: 50%; left: 50%; transition-delay: .35s;
} .u-block-hover–tile:hover::before, .u-block-hover–tile:hover::after, .u-block-hover–tile:hover .u-block-hover__additional–tile::before, .u-block-hover–tile:hover .u-block-hover__additional–tile::after {
transform: scale(1); opacity: 1;
} .u-block-hover__additional–tile__inner {
opacity: 0;
} .u-block-hover–tile:hover .u-block-hover__additional–tile__inner {
opacity: 1; transition-delay: .35s;
}
// // Cube //
.u-block-hover–cube {
overflow: visible; background-color: transparent; perspective: 50em; transform-style: preserve-3d;
}
- class*=“u-block-hover__main–cube”
-
{
transition-delay: .05s;
}
- class*=“u-block-hover__additional–cube”
-
{
opacity: 0; transition-delay: 0s;
} .u-block-hover–cube:hover [class*=“u-block-hover__main–cube”] {
opacity: 0; transition-delay: 0s;
} .u-block-hover–cube:hover [class*=“u-block-hover__additional–cube”] {
opacity: 1; transform: translateY(0%) rotateX(0deg); transition-delay: .05s;
}
// Cube-up .u-block-hover__additional–cube-up {
transform: translateY(50%) rotateX(-90deg);
} .u-block-hover–cube:hover .u-block-hover__main–cube-up {
transform: translateY(-50%) rotateX(90deg);
}
// Cube-down .u-block-hover__additional–cube-down {
transform: translateY(-50%) rotateX(90deg);
} .u-block-hover–cube:hover .u-block-hover__main–cube-down {
transform: translateY(50%) rotateX(-90deg);
}
// Cube-left .u-block-hover__additional–cube-left {
transform: translateX(-50%) rotateY(-90deg);
} .u-block-hover–cube:hover .u-block-hover__main–cube-left {
transform: translateX(50%) rotateY(90deg);
}
// Cube-right .u-block-hover__additional–cube-right {
transform: translateX(50%) rotateY(90deg);
} .u-block-hover–cube:hover .u-block-hover__main–cube-right {
transform: translateX(-50%) rotateY(-90deg);
}
// // Border reveal //
.u-block-hover–border-reveal::before, .u-block-hover–border-reveal::after, .u-block-hover__additional–border-reveal::before, .u-block-hover__additional–border-reveal::after {
content: ""; position: absolute; background-color: $g-color-white; transform-origin: 0 0;
} .u-block-hover–border-reveal::before, .u-block-hover–border-reveal::after {
left: 5px; right: 5px; height: 4px; z-index: 1; transform: scaleX(0);
} .u-block-hover–border-reveal::before {
top: 5px; transition-delay: .28s;
} .u-block-hover–border-reveal:hover::before {
transition-delay: 0s;
} .u-block-hover–border-reveal::after {
bottom: 5px; transition-delay: 0s;
} .u-block-hover–border-reveal:hover::after {
transition-delay: .28s;
} .u-block-hover__additional–border-reveal {
background-color: transparent; z-index: 3;
} .u-block-hover__additional–border-reveal__inner {
opacity: 0;
} .u-block-hover__additional–border-reveal::before, .u-block-hover__additional–border-reveal::after {
top: 5px; bottom: 5px; width: 4px; z-index: -1; transform: scaleY(0);
} .u-block-hover__additional–border-reveal::before {
left: 5px; transition-delay: .28s;
} .u-block-hover–border-reveal:hover .u-block-hover__additional–border-reveal::before {
transition-delay: 0s;
} .u-block-hover__additional–border-reveal::after {
right: 5px; transition-delay: 0s;
} .u-block-hover–border-reveal:hover .u-block-hover__additional–border-reveal::after {
transition-delay: .28s;
} .u-block-hover–border-reveal:hover .u-block-hover__main–border-reveal {
opacity: 0;
} .u-block-hover–border-reveal:hover::before, .u-block-hover–border-reveal:hover::after, .u-block-hover–border-reveal:hover .u-block-hover__additional–border-reveal::before, .u-block-hover–border-reveal:hover .u-block-hover__additional–border-reveal::after {
transform: scale(1);
} .u-block-hover–border-reveal:hover .u-block-hover__additional–border-reveal__inner {
opacity: 1; transition-delay: .35s;
}
// // Mover //
.u-block-hover:hover img, .u-block-hover:hover [class*=“u-block-hover__additional–mover-”] {
opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
img {
max-width: initial; width: calc(100% + 60px); transition-duration: 0.5s; transform-origin: 50% 50%;
}
- class*=“u-block-hover__additional–mover-”
-
{
opacity: 0; transition-duration: 0.5s;
}
// Mover-left img.u-block-hover__main–mover-left {
transform: translate3d(-60px, 0, 0);
} .u-block-hover__additional–mover-left {
transform: translate3d(10px, 0, 0);
}
// Mover-right img.u-block-hover__main–mover-right {
transform: translate3d(-60px, 0, 0);
} .u-block-hover__additional–mover-right {
transform: translate3d(-10px, 0, 0);
}
// Mover-up img.u-block-hover__main–mover-up {
transform: translate3d(0, 20px, 0) scale3d(1.1, 1.1, 1.1);
} .u-block-hover__additional–mover-up {
transform: translate3d(0, 10px, 0);
}
// Mover-down img.u-block-hover__main–mover-down {
transform: translate3d(0, -20px, 0) scale3d(1.1, 1.1, 1.1);
} .u-block-hover__additional–mover-down {
transform: translate3d(0, -10px, 0);
}
// // Focuser //
.u-block-hover__additional–focuser-element {
top: 30px; right: 30px; bottom: 30px; left: 30px; opacity: .3; box-shadow: 0 0 0 31px rgba(0,0,0,.5); transform: scale3d(1.4, 1.4, 1.4); transition-duration: .5s;
} .u-block-hover__additional–focuser-target {
position: static; opacity: 0; transform: scale3d(1.4, 1.4, 1.4); transition-duration: .5s;
} .u-block-hover:hover .u-block-hover__additional–focuser-target, .u-block-hover:hover .u-block-hover__additional–focuser-element {
opacity: 1; transform: scale3d(1, 1, 1); transition-duration: .3s;
}
// // Magnifier //
img {
max-width: initial; width: calc(100% + 10px); margin: -10px 0;
}
- class*=“u-block-hover__additional–magnifier-element”
-
{
width: 400px; height: 400px; border-radius: 50%; box-shadow: 0 0 0 4000px rgba(255,255,255,.3); z-index: 2; opacity: 0; transform: scale3d(.7, .7, .7); transform-origin: 50% 50%;
} .u-block-hover:hover [class*=“u-block-hover__additional–magnifier-element”] {
opacity: 1; transform: scale3d(1, 1, 1);
}
- class*=“u-block-hover__additional–magnifier-description”
-
{
max-width: 115px; z-index: 3; opacity: 0;
} .u-block-hover:hover [class*=“u-block-hover__additional–magnifier-description”] {
opacity: 1; transform: translate3d(0, 0, 0);
}
// Magnifier-bottom-right .u-block-hover__additional–magnifier-element-bottom-right {
top: auto; left: auto; bottom: -180px; right: -180px;
} .u-block-hover__additional–magnifier-description-bottom-right {
top: auto; right: 30px; bottom: 30px; left: auto; transform: translate3d(20px, 20px, 0);
} .u-block-hover:hover img.u-block-hover__main–magnifier-bottom-right {
transform: translate3d(-10px, -10px, 0);
}
// Magnifier-top-right .u-block-hover__additional–magnifier-element-top-right {
top: -180px; right: -180px; bottom: auto; left: auto;
} .u-block-hover__additional–magnifier-description-top-right {
top: 30px; right: 30px; bottom: auto; left: auto; transform: translate3d(20px, -20px, 0);
} .u-block-hover:hover img.u-block-hover__main–magnifier-top-right {
transform: translate3d(-10px, 10px, 0);
}
// Magnifier-bottom-left img.u-block-hover__main–magnifier-bottom-left {
transform: translate3d(-10px, 0, 0);
} .u-block-hover__additional–magnifier-element-bottom-left {
top: auto; left: -180px; bottom: -180px; right: auto;
} .u-block-hover__additional–magnifier-description-bottom-left {
top: auto; right: auto; bottom: 30px; left: 30px; transform: translate3d(-20px, 20px, 0);
} .u-block-hover:hover img.u-block-hover__main–magnifier-bottom-left {
transform: translate3d(0, -10px, 0);
}
// Magnifier-top-left img.u-block-hover__main–magnifier-top-left {
transform: translate3d(-10px, 0, 0);
} .u-block-hover__additional–magnifier-element-top-left {
top: -180px; left: -180px; bottom: auto; right: auto;
} .u-block-hover__additional–magnifier-description-top-left {
top: 30px; right: auto; bottom: auto; left: 30px; transform: translate3d(-20px, -20px, 0);
} .u-block-hover:hover img.u-block-hover__main–magnifier-top-left {
transform: translate3d(0, 10px, 0);
}
// // Pappercuter //
- class*=“u-block-hover__additional–pappercuter”
-
{
transform-origin: 50% 50%;
} .u-block-hover__additional–pappercuter-inner {
width: 100%; transform: rotate3d(0, 0, 1, 5deg);
} .u-block-hover__additional–pappercuter-front, .u-block-hover__additional–pappercuter-back {
max-width: initial; width: 120%; top: -60px; bottom: -60px; left: -10%; z-index: 2; background-position: center; background-size: cover; transform: rotate3d(0, 0, 1, -5deg);
} .u-block-hover__additional–pappercuter-front {
clip: rect(0px, auto, 246px, 0px);
} .u-block-hover__additional–pappercuter-back {
top: -61px; clip: rect(246px, auto, auto, 0px);
} .u-block-hover:hover .u-block-hover__additional–pappercuter-front {
transform: scale3d(1.3, 1.3, 1.3) rotate3d(0, 0, 1, -10deg) translate3d(0, -45%, 0);
} .u-block-hover:hover .u-block-hover__additional–pappercuter-back {
transform: scale3d(1.3, 1.3, 1.3) rotate3d(0, 0, 1, -10deg) translate3d(0, 45%, 0);
}
// // Slide Outside //
- class*=“u-block-hover__additional–outside”
-
{
opacity: 0; visibility: hidden; transition-duration: .5s; transition-timing-function: cubic-bezier(0.7, -1.2, 0.8, 1.2);
} .u-block-hover:hover [class*=“u-block-hover__additional–outside”] {
opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); transition-timing-function: cubic-bezier(0.25, 1.8, 0.8, 1);
} .u-block-hover__additional–outside-down {
transform: translate3d(0, -100%, 0);
} .u-block-hover__additional–outside-up {
transform: translate3d(0, 100%, 0);
} .u-block-hover__additional–outside-left {
transform: translate3d(100%, 0, 0);
} .u-block-hover__additional–outside-right {
transform: translate3d(-100%, 0, 0);
}
// // Slide Lightspeed //
- class*=“u-block-hover__additional–lightspeed”
-
{
visibility: hidden; opacity: 0; transition-duration: .7s; transition-timing-function: cubic-bezier(0.75, -1.2, 0.8, 2);
} .u-block-hover:hover [class*=“u-block-hover__additional–lightspeed”] {
opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) skew(0deg, 0deg); transition-timing-function: cubic-bezier(0.25, 2, 0.75, 1);
} .u-block-hover__additional–lightspeed-left {
transform-origin: 50% 0%; transform: translate3d(150%, 0, 0) skew(-35deg, 0deg);
} .u-block-hover__additional–lightspeed-right {
transform-origin: 50% 100%; transform: translate3d(-150%, 0, 0) skew(35deg, 0deg);
} .u-block-hover__additional–lightspeed-down {
transform-origin: 50% 50%; transform: translate3d(0, -150%, 0) skew(0deg, -35deg);
} .u-block-hover__additional–lightspeed-up {
transform-origin: 100% 50%; transform: translate3d(0, 150%, 0) skew(0deg, -35deg);
}
// // Rotate //
- class*=“u-block-hover__additional–rotate”
-
{
opacity: 0; visibility: hidden;
} .u-block-hover:hover [class*=“u-block-hover__additional–rotate”] {
opacity: 1; visibility: visible; transform: rotate3d(0, 0, 0, 0deg) scale3d(1, 1, 1);
} .u-block-hover__additional–rotate-in {
opacity: 1; transition-property: transform, opacity, visibility; transition-duration: .4s; transform: rotate3d(0, 0, 1, 720deg) scale3d(0, 0, 0);
} .u-block-hover__additional–rotate-down-left {
transform-origin: 0 100%; transform: rotate3d(0, 0, 1, -45deg);
} .u-block-hover__additional–rotate-down-right {
transform-origin: 100% 100%; transform: rotate3d(0, 0, 1, 45deg);
} .u-block-hover__additional–rotate-up-left {
transform-origin: 0 100%; transform: rotate3d(0, 0, 1, 45deg);
} .u-block-hover__additional–rotate-up-right {
transform-origin: 100% 100%; transform: rotate3d(0, 0, 1, -45deg);
}
// // Jump //
.u-block-hover__additional–jump {
position: static;
}
.u-block-hover:hover .u-block-hover__additional–jump, .u-block-hover.u-block-hover__additional–jump:hover {
transform: translate3d(0, -10px, 0);
}
/*————————————
Dedicated Properties
————————————*/
.u-block-hover {
&:hover, &:focus { /* Opacity */ .u-block-hover__prop-opacity-1 { opacity: 1; } /* Colors */ .u-block-hover__prop-color-white { color: #fff; } /* Background-colors */ .u-block-hover__prop-bg-primary { background-color: $g-color-primary; &-opacity-0_9 { background-color: rgba($g-color-primary, .9); } } }
}