// 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; } }