SCSSsample.scss

// services and doctor cards on francisvet.com

@mixin staff-image($background-url, $dimension) {
  padding-left: $dimension;
  box-sizing: border-box;
  background-image: url($background-url);
  background-size: 100%;
  background-color: $blue;
  background-blend-mode: multiply;
  width: $dimension;
  height: $dimension;
}
section#service.three-col-grid {
  background-color: $blue;
  li:nth-child(7) {
    display: none;
  }
  li {
    div.view {
      position: relative;
      img {
        visibility: hidden;
      }
      .mask {
        background-size: 100%;
        opacity: 1;
        background-color: $blue;
      }
      .image-hover-multipler {
        opacity: 0;
        background-color: $red;
        background-blend-mode: multiply;
        background-size: 100%;
        border: 3px solid $grey;
      }
      .content {
        position: absolute;
        text-align: center;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        justify-content: center;
        * {
          color: white;
        }
        p {
          max-width: 80%;
          margin-left: auto;
          margin-right: auto;
        }
      }
    }
    div.view:hover {
      .image-hover-multipler {
        opacity: 1;
      }
      .mask {
        opacity: 0;
      }
      .content {
        display: flex;
      }
    }
  }
}
@media (max-width: 1024px) {
  section#service.three-col-grid {
    li {
      margin-right: 25px;
    }
  }
}
@media (max-width: 720px) {
  section#service.three-col-grid {
    li {
      margin-right: 20px;
    }
  }
}
section#home-staff {
  ul#staff {
    border-bottom: 4px dotted $red;
  }
  li {
    img {
      border: solid 4px $blue;
    }
    .staff-deparment {
      font-size: 19px;
      padding: 10px 0 20px 0;
      color: $blue;
      font-weight: bold;
    }
    .staff-excerpt {
      display: none;
    }
    .staff-title {
      position: relative;
      a {
        display: inline-block;
        padding: 12px 0px;
        background-color: $red;
        width: 70%;
        color: white;
        position: relative;
      }
      a:before {
        content: '';
        position: absolute;
        left: 0;
        top: -30px;
        border-bottom: 30px #87181b solid;
        border-right: 155px transparent solid;
        border-left: 155px transparent solid;
      }
      .fa {
        font-size: 30px !important;
        position: absolute;
        right: 0;
        top: -28px;
        left: 0;
        color: white;
        z-index: 1;
        height: 30px;
        display: block;
      }
    }
  }
  li:nth-child(1) {
    a:hover {
      img {
        @include staff-image('/wp-content/uploads/2017/11/mozinski-200x167-e1509571337957.jpg', 295px);
      }
    }
  }
  li:nth-child(2) {
    a:hover {
      img {
        @include staff-image('/wp-content/uploads/2017/11/Reimers-2-e1510617031211.jpg', 295px);
      }
    }
  }
  li {
    .has-image {
      position: relative;
      &:after {
        content: 'GET TO KNOW';
        position: absolute;
        color: white;
        font-weight: bold;
        display: none;
        text-align: center;
        top: 30%;
        left: 0;
        right: 0;
        font-size: 30px;
        pointer-events: none
      }
      &.show-psudo-text:after {
        display: block;
      }
    }
  }
}
@media (max-width: 1024px) {
  section#home-staff {
    ul#staff {
      li {
        .has-image {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          &:after {
            display: block;
            visibility: hidden;
          }
          &.show-psudo-text:after {
            visibility: visible;
          }
          .content {
            margin: 0;
            width: 110%;
            display: inline-block;
            .staff-title {
              a {
                width: 298.2px;
              }
              a:before {
                border-right: 149px transparent solid;
                border-left: 149px transparent solid;
              }
            }
          }
        }
        img {
          width: 250px;
        }
      }
      li:nth-child(1) {
        a:hover {
          img {
            @include staff-image('/wp-content/uploads/2017/11/mozinski-200x167-e1509571337957.jpg', 250px);
          }
        }
      }
      li:nth-child(2) {
        a:hover {
          img {
            @include staff-image('/wp-content/uploads/2017/11/Reimers-2-e1510617031211.jpg', 250px);
          }
        }
      }
    }
  }
}
@media (max-width: 645px) {
  section#home-staff {
    ul#staff {
      li {
        width: 100% !important;
      }
    }
  }
}