scss-grid/examples/fx/camera/camera.scss

@import "../../../_framework";

.content {
  padding: 10px 0 0 20px;
  background-color: #6ac88e;
  border-bottom: solid 40px #c86350;

  .wrap {
    /*BASIC LAYOUT*/
    @include cols(4, 20);

    .inner {

      .head {
        font-family: sans-serif;
        font-weight: 700;
        font-size: 18px;
        line-height: 24px;
        padding: 10px 0;
        color: #c86350;
      }

      .img-wrapper {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        border: solid thick #c86350;

        img {
          width:100%; // make sure thins dont get wider than the parent cols element
        }
      }
    }

    &.focus {
      /*FOCUS EFFECT*/
      .head {
        @include camera-focus($FOCUS-OUT, 10, $EASE, 0.5, 0);
      }

      img {
        @include camera-focus($FOCUS-OUT, 10, $EASE, 0.5, 0);
      }
    }

    &.zoom {
      /*ZOOM EFFECT*/
      .head {
        @include camera-zoom($FOCUS-OUT, 1.5, $EASE, 0.5, 0);
      }

      img {
        @include camera-zoom($FOCUS-OUT, 1.5, $EASE, 0.5, 0);
      }
    }

    &.shake {
      /*SHAKE EFFECT*/
      .head {
        @include camera-shake(5, 1.5, 0, 0, $EASE, 0.5, 0);
      }

      img {
        @include camera-shake(5, 1.5, 0, 0, $EASE, 0.5, 0);
      }
    }

    &.all {
      /*ALL EFFECTS*/
      .head {
        @include camera-focus($FOCUS-OUT, 0.5, 10, $EASE);
      }

      img {
        @include camera-focus($FOCUS-IN, 0.5, 10, $EASE);
      }
    }
  }
}