//

// Experimenting with background-blend and mix-blend modes

// Note: browser support is spotty and chrome requires experimental flag.

// chrome://flags/#enable-experimental-web-platform-features

// http://caniuse.com/#feat=css-backgroundblendmode

// http://caniuse.com/#feat=css-mixblendmode

//

​

ul {

  display: flex;

  flex-wrap: wrap;

  width: 100vw;

  height: 100vh;

  margin: 0;

  padding: 0;

  list-style: none;

  background: #eee;

  > li {

    position: relative;

    width: 50vw;

    height: 50vh;

    text-align: center;

    background-image: url(http://cdn.jsdm.com/2/detroit_skyline.jpg);

    background-position: center;

    background-size: cover;

    &:after {

      content: "Detroit by Jon DeBoer • jondeboer.com";

      position: absolute;

      bottom: 1rem;

      left: 1rem;

      color: #fff;

      font-size: 0.8rem;

      font-weight: 400;

      mix-blend-mode: soft-light;

    }

    a {

      position: relative;

      top: 50%;

      transform: translateY(-50%);

      display: block;

      margin: auto;

      color: #fff;

      font-size: 8vw;

      font-weight: 700;

      text-decoration: none;

      text-transform: uppercase;

    }

    &:nth-child(1) {

      background-color: #bada55;

      background-blend-mode: luminosity;

      a { mix-blend-mode: overlay; }

    }

    &:nth-child(2) {

      background-color: #f02311;

      background-blend-mode: color-burn;

      a { mix-blend-mode: color-dodge; }

    }

    &:nth-child(3) {

      background-color: #2a8fbd;

      background-blend-mode: hard-light;

      a { mix-blend-mode: soft-light; }

    }

    &:nth-child(4) {

      background-color: white;

      background-blend-mode: difference;

      a { mix-blend-mode: exclusion; }

    }

  }

}

​

*, *:before, *:after {

  box-sizing: border-box;

}

​

html {

  font-family: Montserrat, sans-serif;

}