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

/* Simons SCSS Framework */
@CHARSET "ISO-8859-1";
/* RESET

  SOURCE:
   http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)

*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0 !important; }

.content {
  padding: 10px 0 0 20px;
  background-color: #6ac88e;
  border-bottom: solid 40px #c86350;
  /* Absolute Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }
  .content .wrap {
    /*BASIC LAYOUT*/
    /* Positioning */
    position: relative;
    display: inline-table;
    /* Sizing */
    box-sizing: border-box;
    width: 25%;
    /* Gutters */
    margin: 0 -4px 0 0 !important;
    padding: 0 20px 20px 0 !important;
    border: none !important;
    /* Typography */
    letter-spacing: 0;
    /* Remove last border */ }
    .content .wrap:nth-of-type(4) {
      border-right: none; }
    .content .wrap > * {
      /* Wrapper inside Element needed
         because of gutter >* */
      max-width: 100%;
      box-sizing: border-box; }
    .content .wrap .inner {
      background-color: #ffffff;
      padding: 20px 20px 40px 20px !important;
      box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.4); }
      .content .wrap .inner .head {
        font-family: sans-serif;
        font-weight: 700;
        font-size: 18px;
        line-height: 24px;
        padding: 10px 0;
        color: #c86350; }
      .content .wrap .inner .img-wrapper {
        position: relative;
        box-sizing: border-box;
        overflow: hidden; }
        .content .wrap .inner .img-wrapper img {
          width: 100%; }
    .content .wrap.focus {
      /*FOCUS EFFECT*/ }
      .content .wrap.focus .head {
        /* Camera Focus Effect */
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.5s;
                transition-duration: 0.5s;
        -webkit-transition-timing-function: ease;
                transition-timing-function: ease; }
        .content .wrap.focus .head:hover {
          -webkit-filter: blur(10px);
                  filter: blur(10px); }
      .content .wrap.focus img {
        /* Camera Focus Effect */
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.5s;
                transition-duration: 0.5s;
        -webkit-transition-timing-function: ease;
                transition-timing-function: ease; }
        .content .wrap.focus img:hover {
          -webkit-filter: blur(10px);
                  filter: blur(10px); }
    .content .wrap.zoom {
      /*ZOOM EFFECT*/ }
      .content .wrap.zoom .head {
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.5s;
                transition-duration: 0.5s;
        -webkit-transition-timing-function: ease;
                transition-timing-function: ease; }
        .content .wrap.zoom .head:hover {
          -webkit-transform: rotate(0deg) scale(1.5) translate(0px, 0px);
                  transform: rotate(0deg) scale(1.5) translate(0px, 0px); }
      .content .wrap.zoom img {
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.5s;
                transition-duration: 0.5s;
        -webkit-transition-timing-function: ease;
                transition-timing-function: ease; }
        .content .wrap.zoom img:hover {
          -webkit-transform: rotate(0deg) scale(1.5) translate(0px, 0px);
                  transform: rotate(0deg) scale(1.5) translate(0px, 0px); }
    .content .wrap.shake {
      /*SHAKE EFFECT*/ }
      .content .wrap.shake .head {
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.5s;
                transition-duration: 0.5s;
        -webkit-transition-timing-function: ease;
                transition-timing-function: ease; }
        .content .wrap.shake .head:hover {
          -webkit-transform: rotate(5deg) scale(1.5) translate(0px, 0px);
                  transform: rotate(5deg) scale(1.5) translate(0px, 0px); }
      .content .wrap.shake img {
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.5s;
                transition-duration: 0.5s;
        -webkit-transition-timing-function: ease;
                transition-timing-function: ease; }
        .content .wrap.shake img:hover {
          -webkit-transform: rotate(5deg) scale(1.5) translate(0px, 0px);
                  transform: rotate(5deg) scale(1.5) translate(0px, 0px); }
    .content .wrap.all {
      /*ALL EFFECTS*/ }
      .content .wrap.all .head {
        /* Camera Focus Effect */
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 1s;
                transition-duration: 1s; }
        .content .wrap.all .head:hover {
          -webkit-filter: blur(0.4px);
                  filter: blur(0.4px); }
      .content .wrap.all img {
        /* Camera Focus Effect */
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 1s;
                transition-duration: 1s; }
        .content .wrap.all img:hover {
          -webkit-filter: blur(0.5px);
                  filter: blur(0.5px); }

/*# sourceMappingURL=camera.css.map */