Site Skeleton

mdb/scss/core/_masks.scss

@@ -0,0 +1,78 @@
+// Masks
+// General properties
+.view {
+  position: relative;
+  overflow: hidden;
+  cursor: default;
+  .mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    background-attachment: fixed;
+  }
+  img, video {
+    position: relative;
+    display: block;
+  }
+  video {
+    &.video-intro {
+      z-index: -100;
+      top: 50%;
+      left: 50%;
+      transform: $intro-video-transform;
+      transition: $intro-video-transition opacity;
+      min-width: 100%;
+      min-height: 100%;
+      width: auto;
+      height: auto;
+    }
+  }
+}
+
+// Overlay
+.overlay {
+  .mask {
+    opacity: 0;
+    transition: $mask-overlay-transition;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+// Zoom
+.zoom {
+  img, video {
+    transition: $mask-zoom-transition;
+  }
+  &:hover {
+    img, video {
+      transform: $mask-zoom-transform;
+    }
+  }
+}
+
+// Patterns
+$patterns: (
+  1: "01",
+  2: "02",
+  3: "03",
+  4: "04",
+  5: "05",
+  6: "06",
+  7: "07",
+  8: "08",
+  9: "09"
+);
+
+@each $no, $filename in $patterns {
+  .pattern-#{$no} {
+    background: url("#{$image-path}/overlays/#{$filename}.png");
+    background-attachment: fixed;
+  }
+}