/*
 *  box-hover-effect.scss
 * -----------------------------------------------
*/
.box-hover-effect {
  //display: inline-block;
  display: block;
  vertical-align: middle;
  .effect-wrapper {
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;

    .thumb {
      position: relative;
      overflow: hidden;
      backface-visibility: hidden;
      @include scale(1);
      @include transition(all .4s ease);

      &.gradient-effect:after {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 50%;
        width: 100%;
        background: #181818;
        background: -moz-linear-gradient(top, #000000,rgba(0,0,0,0.55), transparent);
        background: -webkit-linear-gradient(top,#000000,rgba(0,0,0,0.55), transparent);
        background: linear-gradient(to top, #000000,rgba(0,0,0,0.55), transparent);
        content: "";
        z-index: 1;
      }
    }

    .hover-link {
      bottom: 0;
      display: block;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      background: none!important;
      color: transparent!important;
      z-index: 9;
    }


    /* Text Holder */
    .text-holder {
      display: inline-block;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      @include transition(all 0.3s ease 0s);
      z-index: 13;

      .title {
        color: #fff;
      }
    }
  }

  &:hover {
    .effect-wrapper {
      .thumb {
        @include scale(1.05);
      }
      .overlay-shade {
        opacity: 0.7;
        filter: alpha(opacity=90);
      }
    }
  }
}