jekyll-theme-glueckkanja 1.0.2 → 1.1.0

data/_sass/unify/base/_block-hovers.scss

@@ -0,0 +1,1552 @@
+/*------------------------------------
+  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[class*="u-block-hover__main--mover-"],
+.u-block-hover:hover [class*="u-block-hover__additional--mover-"] {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+}
+
+img[class*="u-block-hover__main--mover-"] {
+  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[class*="u-block-hover__main--magnifier"] {
+  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);
+      }
+    }
+
+  }
+}