ydu_confs_rwd/assets/stylesheets/template/modules/gallery.scss

// Gallery MODULES
.widget-gallery {
  .widget-title {
    border-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    line-height: 38px;
    font-size: 18px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-left: 25px;
    border-right: 15px solid #70b8c2;
    color: #fff;
    font-family: 微軟正黑體;
    font-weight: normal;
    background-color: #68d2df;
    background: #68d2df;
    background: -moz-linear-gradient(top, #68d2df 1%, #5cb5c0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #68d2df), color-stop(100%, #5cb5c0));
    background: -webkit-linear-gradient(top, #68d2df 1%, #5cb5c0 100%);
    background: -o-linear-gradient(top, #68d2df 1%, #5cb5c0 100%);
    background: -ms-linear-gradient(top, #68d2df 1%, #5cb5c0 100%);
    background: linear-gradient(to bottom, #68d2df 1%, #5cb5c0 100%);
    -pie-background: linear-gradient(to bottom, #68d2df 1%, #5cb5c0 100%);
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68d2df', endColorstr='#5cb5c0',GradientType=0 );
  }
  .widget-pic img {
    float: left;
    border: 2px solid #d4d4d4;
    padding: 2px;
    background: #fff;
    width: 60px;
    height: 60px;
    margin: 0 5px 5px 0;
  }
}

.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);
        }
      }
    }
  }
}