The SCSS magic that makes my websites overlays.

menuSectionsOverlay.scss

.sections {
  // background: grey;
  color: $white;
  h2 {
    padding-top: rem-calc(32);
    padding-bottom: rem-calc(32);
    padding-left: rem-calc(24);
    padding-left: rem-calc(24);
    font-size: rem-calc(26);
    font-family: $body-font-family;
    font-weight: $global-weight-normal;
  }


  @include breakpoint(medium) {
    height: rem-calc(300);
  }

  $color-1: 5;
  $color-2: 25;
  $overlay: linear-gradient(
      rgba( $color-1, $color-1, $color-1, 0.5),
      rgba( $color-2, $color-2, $color-2, 0.2)
    );
  $overlay-hover: linear-gradient(
      rgba( $color-1, $color-1, $color-1, 0.55),
      rgba( $color-2, $color-2, $color-2, 0.55)
    );

  @mixin overlay($url, $position, $gradient: $overlay,$overlaygradient: $overlay-hover) {
    $transition-duration: 75ms;

    position: relative;
    z-index: 100;
    transition: color $transition-duration linear;
    background: $gradient, url($url) no-repeat $position;
    background-size: cover;



    &:before {
        background: $overlaygradient;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        top: 0; left: 0;
        opacity: 0;
        width: 100%;
        z-index: -100;
        transition: opacity $transition-duration linear, ;

    }
    &:hover {
      &:before {
      opacity: 1;
      }
    }
  }

  &.printdesign {
    @include overlay('/assets/img/printdesign.jpg', 55% 5%);
  }
  &.webdesign {
    @include overlay('/assets/img/webdesign.jpg', 95% 55%);
  }
  &.photography {
    @include overlay('/assets/img/photography.jpg', 25% 55%);
  }
  &.videoproduction {
    @include overlay(
    '/assets/img/videoproduction.jpg',
    25% 55%,
    $gradient: linear-gradient(
                                rgba( 0, 0, 0, 0),
                                rgba( 0, 0, 0, 0)
                              )
    );
  }
}