orbit4-5/app/templates/nccu/assets/stylesheets/template/modules/gallery.scss

// Gallery MODULES
.widget-gallery {
  .widget-title {
    @extend .unity-title;
  }
  .widget-content {
    position: relative;
  }
  &.widget1 {
    .widget-content {
      overflow: hidden;
      .widget-pic {
        display: inline-block;
        padding: 1px;
        text-align: center;
        @include size(33.3333%, auto);
        img {
          @include size(100%, 100%);
        }
      }
    }
  }
  &.widget2 {
    .widget-content {
      margin-left: -5px;
      margin-right: -5px;
      .widget-pic {
        margin-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
        img {
          @include size(100%, auto);
        }
      }
    }
  }
}

.index-gallery {
  .index-title {
    @extend .unity-title;
  }
  &.index1 {
    .index-content {
      .index-content-inner {
        position: relative;
      }
      .index-part {
        position: absolute;
        top: 4px;
        right: 4px;
        bottom: 4px;
        left: 4px;
        overflow: hidden;
        background-color: rgba($theme-color-main, 0.8);
        @include transition(all 0.5s ease);
        @include opacity(0);
        .index-content-title {
          @include transition(all 0.3s ease);
          @include transition-delay(0.1s);
          @include scale(0);
        }
        &:hover {
          @include opacity(1);
          .index-content-title {
            @include scale(1);
          }
        }
      }
      .index-content-title {
        display: table;
        margin: 0;
        @include size(100%, 100%);
        a {
          display: table-cell;
          color: #FFF;
          text-decoration: none;
          text-align: center;
          vertical-align: middle;
        }
      }
    }
  }
}

.show-gallery {
  .show-title {
    @extend .unity-title;
  }
  .show-content {
    padding-right: 0;
    padding-left: 0;
    .img {
      display: inline-block;
      width: 100%;
      height: auto;
      opacity: (0.8);
      -webkit-filter: grayscale(100%) brightness(1.2);
      -moz-filter: grayscale(100%) brightness(1.2);
      filter: grayscale(100%) brightness(1.2);
      @include transition(all 0.2s ease);
    }
    .show-content-inner {
      position: relative;
      padding: 2px;
      z-index: 0;
      @include scale(1);
      @include transition(all 0.2s ease);
      &:hover {
        z-index: 1;
        @include scale(1.1);
        .img {
          opacity: (1);
          -webkit-filter: grayscale(0%) brightness(1);
          -moz-filter: grayscale(0%) brightness(1);
          filter: grayscale(0%) brightness(1);
        }
      }
    }
  }
}